HTML Forms

CheckBox Control

CheckBox Control

The checkbox control is used to check multiple options from given checkboxes.

Example

<form>

Hobby:<br>
  <input type="checkbox" id="cricket" name="cricket" 
  value="cricket"/>
	 <label for="cricket">Cricket</label> 
	 <br>
  <input type="checkbox" id="football" name="football" 
  value="football"/>
	 <label for="football">Football</label> 
	 <br>
  <input type="checkbox" id="hockey" name="hockey" 
  value="hockey"/>
	 <label for="hockey">Hockey</label>

</form>

Output

Hobby:
Cricket
Football
Hockey

File Upload Box

File Upload Box Control

Specifies what file types the user can pick from the file input dialog box: It is created using input element with attribute type file

Example

<form>

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

</form>

Output

HTML Forms

HTML Forms

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. HTML forms are required if you want to collect some data from of the site visitor. For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.

HTML Form Syntax

We use the <form> tag to create HTML form .The example of it's syntax is :

Example

<from action="server url" method="get|post"
    
 //input controls e.g. textfield, textarea,


        radiobutton, button  
    </form>

Form Attributes

Form Atrributes

No.	Attributes and Definition
1.	action: Backend script ready to process your passed data.
2.	method: Method to be used to upload data. The most frequently used are GET and POST methods.
3.	target: Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
4.	enctype: You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are −.

fore it sends it to the server. Possible values are −.

Single Line Text Input Control

Single Line Text Input Control

The type ="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

Example

<form>

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

Output

First Name:
Last Name:

Multiple Line Text Input Control

Multiple Line Text Input Control

When the user wants to enter details which are longer than a single line or sentence, then we require multiple line text input control It is used created HTML <textarea> tag .

Example

<form>

 Description : 
   <textarea rows = "5" cols = "50" name = "description">
   </textarea>

</form>

Output

Description :
Enter description here...

Password input Control

Password input Control

The password is not visible to the user in password field control.

Example

    <form>

     <label> for="password">Password: </label>
     <input type="password" id="password" name="password"/> 
     <br/>

    <;/form>;

Output

Password:

Radio Button Control

Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a time. Using radio buttons for multiple options, you can only choose a single option at a time.

Example

<form>

<label for="gender">Gender: </label>
<input type="radio" "name="gender" value="male"/>
            Male
<input type="radio" "name="gender" value="female"/>
            Female 
<br/>

</form>

Output

Gender: Male Female

SelectBox Control

SelectBox Control

The selectbox control defines a drop down list.

Example

<form>

  <select name = "dropdown">
	<option value = "Biology" selected>Biology</option>
	<option value = "Chemistry">Chemistry</option>
  </select>

</form>

Output

Biology Chemistry

Submit Rest Button

HTML Button Control

Submit button Control

HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server.

Example

    <form>

   <label for="name">Enter name</label>
    <br>
    <input type="text" id="name" name="name">
    <br>
  <label for="pass">Enter Password</label>
    <br>
    <input type="Password" id="pass" name="pass">
    <br>
    <input type="submit" value="submit">


    </form>

Output

Enter name

Enter Password

Reset button Control

A"reset" button allows users to basically clear their web form. It wipes values from all fields by "resetting" the form to its default appearance.

Example

    <form>

      <input type="text" size="12" maxlength="12" />
      
      <input type="text" size="24" maxlength="24" />
     
      <input type="reset" value="Reset" />


    <;/form>;

Output