Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.
This module will help you master the essentials of web forms.
The HTML <form> element formally defines a form and attributes that determine the form's behavior. Each time you want to create an HTML form, you must start it by using this element, nesting all the contents inside.
autocomplete - attribute indicates whether input elements can by default have their values automatically completed by the browser. Values are on or off
Attributes for form submission
action - the URL that processes the form submission.
method - the HTTP method to submit the form with. The possible values are POST form data sent as the request body and GET form data appended to the action URL with a ? separator.
<form action="" menthod="GET" >
form input elements
</form>
The HTML <label> element represents a caption for an item in a user interface.
The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. With for attributes we can given gorm element id value to define it.
<form>
<label for="" >Input 1 label name</label>
form input 1 element
</form>
Text <input> fields are the most basic form widgets.
A single line text field is created using an <input> element whose type attribute value is set to text. Attribute placeholder retain the information text for that field and value is current value of the form control.
<form>
<label for="name">Name: </label>
<input type="text" id="name" placeholder="input text field" >
</form>
A Password field is created using an <input> element whose type attribute value is set to password. The Password field obscure the value entered into the field so it can't be easily read by others.
<form>
<label for="password">Password: </label>
<input type="password" id="password" value="mypassword" >
</form>
A Hidden field is created using an <input> element whose type attribute value is set to hidden. This is used to create a form control that is invisible to the user, but is still sent to the server along with the rest of the form data once submitted
<form>
<input type="hidden" name="timestamp" value="1286705410">
</form>
Checkable items are controls whose state you can change by clicking on them or their associated labels. There are two kinds of checkable item: the check box and the radio button.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Checkboxe is created using an <input> element whose type attribute value is set to checkbox. Including the checked attribute makes the checkbox checked automatically when the page loads. Clicking the checkbox or its associated label toggles the checkbox on and off.
<form>
<label for="red">Red: </label>
<input type="checkbox" id="red" name="redcolor" checked>
</form>
Radio buttons let a user select ONLY ONE of a limited number of choices.
Radio button field is created using an <input> element whose type attribute value is set to radio. Including the checked attribute makes the radio button checked automatically when the page loads. Clicking the radio button or its associated label toggles the radio button on and off.
<form>
<label for="red">Red: </label>
<input type="checkbox" id="red" name="redcolor" checked>
</form>
The radio button isn't actually a button, despite its name.
Sends the form data to the server.
For button <button> element whose type attribute value is set to submit.
<form>
<button type="submit" >Submit </button>
</form>
Sends the form data to the server.
For button <button> element whose type attribute value is set to submit.
<form>
<button type="reset" >Submit </button>
</form>