HTML Part 5: Html Code to Create Form and HTML Form Elements

Get unlimited access to the best preparation resource for UGC : Get detailed illustrated notes covering entire syllabus: point-by-point for high retention.

Topics to be Covered

  • HTML Form

  • Label

  • Input Field

  • Multiline Input Field

  • Radio Button

  • Data List

  • Check box

  • Email

  • Password field

  • Number Field

  • File Selector

  • Submit Button

  • Reset Button

HTML Forms - HTML Part 5

HTML Forms can be used to collect data from the visitor. An HTML Form contains form elements.

HTML Forms

HTML Forms

Loading image

Html Code to Create Form

<Form action= “url”>

……………..

<! ---Form elements--->

………………

</Form>

HTML Form Elements

  • Label

  • Input Field

  • Multiline Input Field

  • Radio Button

  • Data List

  • Check box

  • Email

  • Password field

  • Number Field

  • File Selector

  • Submit Button

  • Reset Button

Label

  • Label is used to display information to the visitor/user.

  • Code to Add Label on The Form

  • <label for= “fname”> First Name: </label>

Input Field

  • Input Field is used to collect information from the user/visitor.

  • Code to Add Input Field on The Form

  • <input type= “text” id= “fname” name= “fname”>

Output

Input Field: Output

Input Field: Output

Loading image

Note: value of ‘for’ attribute of label and ‘id’ attribute of another element, for which you have created that label should be same to bind them together.

Multiline Input Field

Html CodeAddress: <Textarea id= “address” rows= “10” cols= “30”>

Attributes of Textarearows - specifies the number of lines in Textareacols - defines the width of Textareamax length – defines the maximum number of characters allowed in Textarea

Output

Multiple Input Field: Output

Multiple Input Field: Output

Loading image

Radio Buttons

A Radio button is used to select one option from many given options.

Attributes

  • Name- specifies the name of the radio button

  • Value- this attribute defines the unique value of each radio button.

Html Code

  • select gender: <br>

  • <Input type= “radio” name= “gender” value= “Female”> Female

  • <input type= “radio” name= “gender” value= “Male”> Male

Output

Radio Buttons: Output

Radio Buttons: Output

Loading image

Note: Value of ‘name’ attribute for all the radio button should be same to make them a group.

Data List

By using Data list, a user can create a drop-down list. User can select one option from the list. It also provides auto complete feature, that means, if the user enters half of value matched with list element, it will automatically be completed.

HTML Code to Create Data List

Select your City:

  • <input list= “City” name= “City”>

  • <data list id= “City”>

  • <option value= “Chandigarh”>

  • <option value= “Delhi”>

  • <option value= “Baddi”>

  • <option value= “Jalandhar”>

  • </data list>

HTML Code to Create Data List

HTML Code to Create Data List

Loading image

Check Box

Checkbox is used when there is a need to select multiple options at a time. It is just like a square box. It represents ‘yes’ or ‘no’ and ‘true’ or ‘false.’ When it is ticked, it means ‘yes’ and if unticked, means ‘no.’

HTML Code to Use Checkboxes

HTML Code to Use Checkbox

HTML Code to Use Checkbox

Loading image

Output

Check Box: Output

Check Box: Output

Loading image

Note: Always use it with label element.

Email

  • Input type= “email” element is used to accept Email ID as value from the user.

  • It automatically validates email format when submitted. A developer need not to create any validation function to check the formation of the entered email.

HTML Code to Use Email Box

<input type= “email” id= “email” name= “email”>

Output

Email Box: Output

Email Box: Output

Loading image

Validating Email and Showing Error

Validating Email and Showing Error

Validating Email and Showing Error

Loading image

Password Field

Password field is used to accept password as input from user. It is just like another input field, but characters entered the box are masked.

HTML Code to Use Password Field

Enter Password: <input type= “password” id= “pswd” name= “pswd”>

Output

Password Field: Output

Password Field: Output

Loading image

Number Field

Number field accepts only number in the input field. You can also set the criteria of numbers allowed.

HTML Code to Use Number Field

HTML Code to Use Number Field

HTML Code to Use Number Field

Loading image

Output

Number Field: Output

Number Field: Output

Loading image

Attributes

  • Min- It specifies the minimum value of the number field

  • Max- It specifies the maximum value allowed.

  • Step- It specifies the step (interval) value.

  • Value- It specifies the initial value of the number field

File Selector

It provides a field that helps to find a file by clicking on given browse button.

HTML Code to Use File Selector

Select a file: <input type= “file” id= “myfile” name= “myfile”>

Outputs

File Selector: Output

File Selector: Output

Loading image
File Selector: Output

File Selector: Output

Loading image

Submit Button

Submit button is used to submit the form to a server/database/any source.

HTML Code to Use Submit Button

  • <form action= “success.html”>

  • <input type= “submit” value= “Submit by Admin”>

  • </form>

  • Note: When you will click on the button, ‘action attribute’ of <form> will execute.

Reset Button

Reset button is used to clear all the values entered in the form.

Output [Submit/Reset Button]

Registration Form

Registration Form

Loading image

MCQ

Q-1 Which form element execute ‘action attribute’ of <form>tag when clicked?

1. Radio Button

2. Check Box

3. Submit Button

4. Reset Button

Ans: 3. Submit Button

Q-2 Which form element is only used to display information to the user/visitor?

1. Number Input field

2. Password Input Field

3. File Selector

4. Label

Ans: 4. Label