{Tutorial}HTML Forms.Step 16.

[MrHotFire]

HTML Forms

 

HTML forms are used to pass data to a server.

 

An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

 

The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

 

HTML Forms - The Input Element

 

The most important form element is the <input> element.

 

The <input> element is used to select user information.

 

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

 

The most common input types are described below.

Text Fields

 

<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

 

Password Field

 

<input type="password"> defines a password field:

<form>
Password: <input type="password" name="pwd">
</form> 

Note: The characters in a password field are masked (shown as asterisks or circles).

 

Radio Buttons

 

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY 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> 

 

Checkboxes

 

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form> 

 

Submit Button

 

<input type="submit"> defines a 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. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

 

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_action.asp". The page will show you the received input.

 

HTML Form Tags

 

<form> 	Defines an HTML form for user input
<input> 	Defines an input control
<textarea> 	Defines a multiline input control (text area)
<label> 	Defines a label for an <input> element
<fieldset> 	Groups related elements in a form
<legend> 	Defines a caption for a <fieldset> element
<select> 	Defines a drop-down list
<optgroup> 	Defines a group of related options in a drop-down list
<option> 	Defines an option in a drop-down list
<button> 	Defines a clickable button
<datalist> 	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output> 	Defines the result of a calculation

 

Credits Olympus,Internet,ME.