Usually a HTML Form is created to enable people who visit a webpage to enter information or select from a set of predefined options.
HTML Form
HTML forms are used to pass data to a server, to be processed by a programming language (like PHP, ASP, NodeJS). HTML forms can also be used with script languages, like JavaScript.
The <form> tag is used to create a HTML form.
<form action='#'>
... form elements
</form>
The <form> tag uses the following attributes:
action='url' - Specifies the URL address where to send the form-data. This attribute is required, default is the curent URL if no address is added.
accept-charset='charset_list' - Specifies the character-sets the server can handle for form-data (UTF-8, ISO-8859-1).
autocomplete='on | off' - Allows the browser to fill in a field automatically (on) or requires the user to enter the information every time (off).
enctype='content_type' - Specifies how form-data should be encoded before sending it to a server (application/x-www-form-urlencoded, multipart/form-data, or text/plain).
method='get | post' - Specifies which HTTP method will be used to submit the form-data.
name='text' - The name of the form.
target='value' - Specifies where to open the action URL. Value can be: _blank, _self, _parent, _top or a framename
A form can contain input elements like text fields, checkboxes, submit buttons; and select lists, textarea, fieldset, and more. All form elements are added inside <form> ... </form> tag.
Form - Input Elements
The input element is the most important form element. It is used to select user information, and can vary in many ways, depending on the type attribute.
Attributes of the <input /> tag:
type='value' - Specifies the type of an input element (text, checkbox, radio, button, etc.)
name='text' - Specifies a name for an input element
accesskey='character' - Assigns an access key (keyboard shortcut) to an element for quicker access
alt='text' - Specifies an alternative text for an image input (only for type='image')
checked - When this attribute is added to a radio button or checkbox input, the input will be checked when the page loads
disabled - Disables the control for user input
maxlength='number' - Specifies the maximum number of characters the user can enter; for input elements with type: text, password, search, tel, url
readonly - Indicates that the form input may not be modified by the user
size='number' - Specifies the width of an input field (in number of characters)
src='url' - When the input type is 'image', this attribute provides the location of the image to be used as a push button
value='text' - Specifies the initial value for this input
Text field
Defines an one-line input field that a user can enter text into (the default width of a text field is 20 characters).
<input type='text' name='a_name' />
How it looks in a browser:
Password field
type='password' creates a text input element, but the characters are masked (shown as asterisks or circles).
<input type='password' name='a_name' />
How it looks in a browser:
Checkbox
Checkboxes let a user select one or more options of a limited number of choices.
Allows users to submit external files to the server. It is used for file uploads.
- This field is accompanied by a 'Browse' button, used to choose which document to be transferred to server.
<input type='file' name='a_name' />
How it looks in a browser:
Simple button
type='button' defines a clickable button, that does not do anything. The button type is most often used to activate a JavaScript function when a user clicks on the button.
<input type='button' value='Click here' />
How it looks in a browser:
Submit button
A submit button is used to send form data to a server. The data is sent to the page specified in the form's 'action' attribute.
<input type='submit' value='Send' />
Image for the Submit button
type='image' defines an image as a submit button. If a type='image' button is pressed, the form is submitted. The 'src' and 'alt' attribute are required.
The <textarea> tag defines a multi-line text input control which can hold an unlimited number of characters.
The size of a textarea can be specified by the cols and rows attributes, or through CSS, with height and width properties.
<textarea name='a_name' cols='20' rows='3'> Text content </textarea>
How it looks in a browser:
Attributes for textarea:
cols='number' - The width of textarea
rows='number' - The number of rows, the hight of textarea
name='text' - Specifies a name for a textarea
disabled - Disables the control for user input
readonly - Indicates that the form control may not be modified
Select list
The <select> </select> tag is used to create a select list (drop-down list).
This element should contain one ore more <option>...</option> tags. This tag defines an option within the select item.
- If the 'value' attribute is not added in the <option> tag, its content will be the value that is sent to the server.
How it looks in a browser:
Attributes for <select>:
size='number' - Specifies the number of visible options in a drop-down list. For values higher than 1, the options are displayed as a scrolling list with the specified number of options visible.
name='text' - Specifies a name for a select list
disabled - Disables the control for user input
multiple - Allows the user to select more than one option from the list. When this attribute is absent, only single selections are allowed.
Attributes for <option>:
selected - Makes this item selected when the form is initially displayed
value='text' - Defines a value to assign to the option item.
<label> tag
The <label> tag defines a label for an input element.
Each label element is associated with one form control. The label element may contain the form control, or it may use the 'for' attribute to identify the control by its 'id' value.
- Syntax:
The <fieldset> tag is used to logically group together elements in a form. It draws a box around the related form elements.
The <legend> tag defines a caption for the fieldset element.
Example: