Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
<input>
<input>
</form>
Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
How it looks in a browser:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
How it looks in a browser:
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
I have a car:
<input type="checkbox" name="vehicle" value="Car">
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
How it looks in a browser:
Button
A simple clickable button. This input type is mostly used together with JavaScript to activate a script.
On its own, the button input does not really do anything ("action" attribute will be explained later):
<form action="">
Button:
<input type="button" value="Click me" />
</form>
How it looks in a browser:
Password
The password input type is almost completely identical to the text field input. The difference is that characters displayed in this field are masked. The characters will be shown like stars (or circles, depending on the browser).
This input field will mask the text to any onlookers, however, the form sends the data as plain text.
<form action="">
<input type="password" name="pass" value="example" />
</form>
How it looks in a browser:
File
The file input type is used for file uploads.
<form action="">
File: <input type="file" />
</form>
How it looks in a browser:
The file upload attribute "accept" specifies what kind of files can be uploaded. However, it is poorly supported in all major browsers. It is recommended to use server side validation on file uploading.
Image
The image input type is used just like the standard submit button (described further up). Use this input type when you need something other than a standard button. Any image can be used as a button.
By default, if no form action is specified, this input type sends the click coordinates of the image when activated.
When using this input type you must also specify the image url using the src attribute, and the alternate image text, using the alt attribute:
<form action="">
<input type="image" src="http://www.w3schools.com/tags/input_image.gif" alt="W3Schools button" />
</form>
How it looks in a browser:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
<form name="input" action="http://www.w3schools.com/html/html_form_submit.asp"
method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
How it looks in a browser:
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input.
Complete Form Attributes
DTD indicates in which DTD the attribute is
allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute | Value | Description | DTD |
|---|---|---|---|
| accept | list_of_mime_types | A comma-separated list of MIME types that indicates the MIME type of the file transfer. Note: Only | STF |
| align | top texttop middle absmiddle baseline bottom absbottom | Deprecated. Use styles instead. Defines the alignment of text following the image. Note: Only used with type="image" | TF |
| alt | text | Defines an alternate text for the image. Note: Only used with type="image" | STF |
| checked | checked | Indicates that the input element should be checked when it first loads. Note: Used with type="checkbox" and type="radio" | STF |
| disabled | disabled | Disables the input element when it first loads so that the user can not write text in it, or select it.
| STF |
| maxlength | number | Defines the maximum number of characters allowed in an input field. Note: | STF |
| name | field_name | Defines a unique name for the input element. Note: | STF |
| readonly | readonly | Indicates that the value of this field cannot be modified.
| STF |
| size | number_of_char | Defines the size of the input element. Note: Cannot be used with type="hidden" | STF |
| src | URL | Defines the URL of the image to display. Note: Only used with | STF |
| type | button checkbox file hidden image password radio reset submit text | Indicates the type of the input element. The default value is Note: This is not a required attribute, but we think you should | STF |
| value | value | For buttons, reset buttons and submit buttons: Defines the text on the button. For image buttons: Defines the For checkboxes and radio buttons: Defines the result of the input For hidden, password, and text fields: Defines the default value Note: Cannot be used with type="file" Note: This attribute is required with type="checkbox" and | STF |
没有评论:
发表评论