Hello, world!

Forms HTML

HTML Forms are very useful espcially on collecting data from the users. In the HTMl tutorial you will learn about various forms that can be applied in HTML such as single-line text input control, text input control, password input control, multiple-Line text input control, radio button control, checkbox control, select box control, button control, file upload box, and hidden form control.



HTML Forms

HTML Forms is section of a document where you can gather some data from the user.
It allows users to send data to the web site through the use of various form elements.
It applies form elements such as text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc in order to submit data from the users.
 

Syntax html forms:

 <form>form elements</form>

Form Attributes:

action - This attribute indicates the  address (url) that processes the form information.
Method - This attribute indicates which HTTP method will be used to submit data.
Target - This attribute indicates the target of the address indicating where the response that is received will be displayed.
Enctype - This attribute indicates how the browser encodes the data before it submit it to the server : Possible values are: application/x-www-form-urlencoded - this is the default value,  multipart/form-data - the value should be for an <input> element, and set the type="file".

HTML Form Controls

The <input> element has many variants, depending on the type attribute.
Control Types:
Text Input Controls -  input type="text"
Checkboxes Controls -  input type="checkbox"
Radio Box Controls -  input type="radio"
Select Box Controls -  also called as drop down box
File Select boxes -  input type="file"
Hidden Controls -  input type="hidden"
Clickable Buttons -  input type="button"
Submit Button -  input type="submit"
Reset Button -  input type="reset"
Password Input Controls -  input type="password"

Single-line text input controls

Allow users to enter one line data only. They are created using HTML <input> element.

Attributes for <input> tag for creating text field:
type – This is applied to specify the type of input control to be used. For text input control it will be set to text.
name – This is applied to name the control which is passed to the server to be acknowledged and acquire the value.
value – This is applied to specify the initial value within the control.
size – This is applied to specify the amount of text-input control in terms of characters.
maxlength – This is applied to specify the maximum amount of characters that can input into the text box by the user.

HTML code example single-line text input controls:

<form>
Surname:  <input type="text" name="surname" />
<br>
Given Name:  <input type="text" name="given_name" />
</form>

HTML code example single-line text input controls:

Surname:
Given Name:


Text Input Controls

Types of text input:
Single-line text input controls - Allow users to input only one line data. They are built through the HTML <input> element
Password input controls - Allow users to input with one line data but the characters are masked as soon as a user inputs it. They are created using HTML <input> element.
Multi-line text input controls - Allow the users to input data that contains multiple line. They are built through the HTML < textarea > element.

Password input controls

Allow users to enter with one line data but the characters are masked as soon as a user inputs it. They are created using HTML <input> element.

Attributes for <input> tag for creating password field:
type – This is applied to indicate the type of input control to be used. For text input control it will be set to password.
name – his is applied to name the control which is passed to the server to be acknowledged and acquire the value.
value – This is applied to indicate the initial value within the control.
size – This is applied to indicate the amount of the text-input control in terms of characters.
maxlength – This is applied to indicate the maximum amount of characters that can input into the text box by the user.

HTML code example password input controls:

<form>
Username :  <input type="text" name="user_name" />
<br>
Password:  <input type="password" name="password" />
</form>

HTML output password input controls:

Username :
Password:


Multiple-Line Text Input Controls

Allow the users to enter details that may be longer than a single line.
They are built using HTML < textarea > element.

Attributes for <textarea> tag:
name – his is applied to name the control which is passed to the server to be acknowledged and acquire the value.
rows – This is applied to indicate the value of rows of text area box
cols – This is applied to indicate the value of columns of text area box

HTML code example password input controls:

<form>
Suggestion : <br />
<textarea rows="5" cols="50" name="suggestion">
Input suggestion here...
</textarea>
</form>

HTML output password input controls:

Suggestion :


Radio Button Control

Radio buttons are used to let the user select just one option from a pre-defined set of options. They are created using an <input> tag and the type attribute has a value of radio.

Attributes for <radio> tag:
type – This is applied to indicate the type of input control to be used. For checkbox input control it will be set to radio.
name – This is applied to name the control which is passed to the server to be acknowledged and acquire the value.
value - This is applied to provide a value if the radio is selected.
checked - When you need to choose it as default, set it to ‘checked’.

HTML code example radio button control:

<form>
<input type="radio" name="Married" value="on"> Married
<input type="radio" name="Single" value="on"> Single
</form>

HTML output radio button control:

Married Single


Checkbox Control

Checkboxes allows the user to select multiple option from a pre-defined set of options.
They are created using an <input> tag however, the type attribute is assigned to checkbox.

Attributes for <checkbox> tag:
type – This is applied to indicate the type of input control to be used. For checkbox input control it will be set to checkbox.
name – This is applied to name the control which is passed to the server to be acknowledged and acquire the value.
value - This can be applied to provide a value if the checkbox is chosen.
checked - When you need to choose it as default, set it to ‘checked’.

HTML code example checkbox control:

<form>
<input type="checkbox" name="yahoo" value="on"> Yahoo
<input type="checkbox" name="google" value="on"> Google
<input type="checkbox" name="MSN" value="on"> MSN
</form>

HTML output checkbox control:

Yahoo Google MSN


Select Box Control

A select box is known also as drop down box that gives pull-down list of options from where user can choose one or more option.
They are built through the <select> element and <option>element.

Attributes for <select> tag:
name - This is applied to name the control which is passed to the server to be acknowledged and acquire the value.
size - This can be applied to provide a scrolling list box.
multiple - Set to “multiple” when you need to provide list from the menu and allowing the user to select various items.

Attributes for <option> tag:
value - Indicates the value of the option item.
selected - Indicates that this option will be pre-selected when page loads.
label - Indicates a label to be used as an alternative way to the option item's value.

HTML code example select box control:

<form>
<select name="dropdown">
<option value="Google" selected>Google</option>
<option value="Yahoo">Yahoo</option>
<option value="MSN">MSN</option>
</select>
</form>

HTML outpute select box control:



Button Controls

HTML Button Controls <button> element allows you to create push buttons in different ways.
They are built using <input> tag by and the  type attribute value is set to button.

Type Attributes for Button Controls:
submit – Corresponds to a button that automatically submits a form.
reset - Corresponds to a button that automatically resets a form.
button - Corresponds to a button that is used to activate a script when the user pressed that button.
image - Corresponds to a button that allows you to make a button but you can use an image as its background.

HTML code example button controls:

<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
<input type="button" name="ok" value="OK"  />
<input type="image" name="imagebutton" src="http://ny.pe/images1/LoggaNYPE3.png" />
</form>

HTML output button controls:



File Upload Box

File Upload Box allows a user to browse for a local file and upload it to your website.
It is usually provided as a text box with a clickable button that enables the user to find for a file.
They are built using an <input> element, and the type attribute value is set to file.

Attributes for file upload box:
name - This is applied to name the control which is passed to the server to be acknowledged and acquire the value.
accept - Indicates the types of files that the server accepts.

HTML code example file upload box:

<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>

HTML output file upload box:



Hidden Form Controls

Html Hidden Form Controls are used to control and hide data within the page that can be sent to the server.
Hidden Form Controls hides inside the code never displayed on the page.

HTML code example hidden form controls:

<form>
<p>Welcome to Page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
</form>

HTML output hidden form controls:

Welcome to Page 10