HTML Forms
Users can gather input by using an HTML form. The user entry is mostly sent to a processing server.
A simple form:-
HTML Forms
If you click the "Submit" button, the form-data will be sent to a page called "html-resources/submit.aspx".
Output :-
HTML Forms
The <form> Element
Used to create an HTML form for user input: The HTML form
element.
Basically its a container for other html form elements.
The user cannot see the form (the form is not visible itself) but they can view the form elements which is stored in the inside of form
tag.
The <input> Element
The most commonly used form element is the HTML input
element.
Depending on the type of attribute an element input
is displayed in several ways.
Here are some examples :
Type | Description |
---|---|
type="text" | A single-line text input form is displayed. |
type="radio" | A radio button is displayed (for selecting one of many choices) |
type="checkbox" | A checkbox is displayed (for selecting zero or more of many choices) |
type="submit" | A submit button appears (for submitting the form). |
type="button" | A clickable button is displayed. |
Text Fields
In the type="text"
, the input
field for the input is defined in a single line.
Example:- A form with input fields for text.
Output :-
Note that the form itself is not visible. Also note that the default width of text input fields is 20 characters.
The <label> Element
Notice in the example above the use of the label
element.
The label
tag specifies a label for many elements of the form.
The label
feature is useful in the user's screen reader since when the user concentrates on the input element, the screen reader reads the label out.
The label
element will also assist those who have a difficulty clicking on very small areas (e.g. radio buttons or checkboxes) - because it toggles the radio/checkbox when the user clicks on the text in the element label
.
The for
attributelabel
tag attribute should be equal to the input
element id attribute in order to tie them together.
Related Links
Radio Buttons
A radio button is defined by the type="radio"
.
Radio buttons allow the user to choose any one item from a number of items.
Example :-
Output :-
Checkboxes
A checkbox is set by the type="checkbox"
.
Checkboxes allow the user to choose ZERO or more items from a list of options.
Example :-
Output :-
The Submit Button
The type="submit"
button specifies the form information (entered by user) to be submitted to a URL (form handler).
The form-handler usually is a file with a script on the server for data processing.
The form-handler is indicated in the attribute of action
of the form.
Example :-
Output :-
HTML Forms
If you click the "Submit" button, the form-data will be sent to a page called "/submit.aspx".
Related Links
The name Attribute for <input>
Note that a name
attribute must be given to each input field.
The input value of the input field is not displayed if the name
attribute is omitted.
Example :- The value for the "First name" input field is not provided for this example.
Output :-
If you click the "Submit" button, the form-data will be sent to a page called "/submit.aspx".
Notice that the value of the "First name" field will not be submitted, because the input element does not have a name
attribute.