CHApTer 6 ■ WorkIng WITH ForMSIt is the value attribute that determines the text that appears on the button. The name attribute can be used as a
reference. For example, you might use this in JavaScript code or in the server-side processing logic (such as a PHP script),
once the form is submitted. This attribute applies to all of the form elements and serves the same purpose in each case.
text
By far the most commonly used input type, the text input creates a single-line box into which the user can enter text.
Here’s what it looks like:
In this example, I used the placeholder attribute to create a hint as to the expected value of this field. Using
placeholder can be a very efficient way of exploiting available screen space, as it can be used in lieu of a label. The
size attribute dictates the width of the field. I rarely use this attribute, as I tend to use CSS instead, which gives much
more precision and control. Here’s an example using this approach:
Here, I have used the style attribute to inline a CSS rule and set the width property to 220 pixels. Inlining the CSS
rule like this is good for demonstrations, but, of course, you could (and probably should) use a dedicated style sheet
for all of your CSS rules.
■ Caution I mentioned previously that the placeholder attribute can be a very efficient way of exploiting available
screen space. However, it can create accessibility issues. Using the label element is generally a better approach. The
label element, covered later in this section, is also much better supported across browsers.
checkbox
If you want your users to respond with a yes or no, a true or false, or some other two state values, checkbox is the input
type that you need. The only possible actions are checking or unchecking the box. Here’s what the check box looks like:
The value attribute determines the value that is sent to the server. For example, you can set the value to
opt-in-newsletter, and this is the string value that will be sent to the server as the checked value.
Following is another, almost identical, example. In this case, we have added the checked attribute, so that the
check box will be in its checked state by default.
password
The password field is very similar to the standard text input. It looks like this:
The password input differs in that the characters entered into it are masked in the browser, so that prying eyes
cannot read what is being entered.