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

Dr. Manishika Jain- Join online Paper 1 intensive course. Includes tests and expected questions.

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 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

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 Code Address:< Textarea id = “address” rows = “10” cols = “30” >

Attributes of Textarea rows - specifies the number of lines in Textarea cols - defines the width of Textarea max length – defines the maximum number of characters allowed in Textarea

Output

Multiple Input Field: Output

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

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

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

Output

Check Box: Output

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

Validating Email and Showing Error

Validating Email and Showing Error

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

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

Output

Number Field: Output

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

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

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

Developed by: