Forms Controls in HTML5 | HTML Form Elements
Form controls | Elements: A form is a collection of different elements also called as controls like textbox, radio button, checkbox, submit button and many more.
The <Input> tag
The <Input> tag is used to specify the different types of controls by using type attribute. Syntax of using <Input> with type attribute is;
Type of Control:
Text: Creates a one line textbox
<Input type = “text”>
Radio: Creates a radio button. The radio button allows one option selection against multiple choices.
<Input type = “radio”>
Checkbox: Creates a checkbox. It allows more than one selection against multiple choices.
<Input type =”checkbox”>
Password: The password input type is used to create text contents in the form of ‘*’ asterik or ‘•’ disc.
<Input type = “password”>
Submit: Displays a button for submitting the form data to a server.
<Input type =”submit”>
Reset: The reset control clears the text content entered in the form.
<Input type = “reset”>
Button: It displays push button which activates on events.
<Input type =”button”>
Attributes of <Input>: Apart from type attribute, there are attributes which are specific to a particular type of controls. The following table specifies the description.
Type: It describes, the name of the control like text radio etc. eg. type = “radio”
Name: Each input field must have a name. The name attribute is a user defined value. If
the name attribute is not specified, the data of that input field will not get submitted.
Maxlength: This attribute is used with text and password type. It specifies the maximum
number of characters which can be entered in a text or password box.
Size: The ‘Size’ attribute can be used with text and password type. It specifies the width of the text box.
Checked: The ‘Checked’ attribute specifies the default selection for options in a checkbox or radio button.
Value: The ‘Value’ attribute can be used with text, checkbox, radio, submit or reset.
- When used with text type it specifies default value in a text box.
- For checkbox and radio. It defines value which is sent on submit.
<Textarea> tag : The <textarea> is used to create a textbox with multiple lines. The number of lines and width of the textbox are specified by using rows and cols attribute respectively. The <textarea> can have following attributes.
name : It is used to specify name for the textarea. For example name =”ta1″.
rows : It specifies the number of lines in a textarea. For example rows = “5”
cols : It specifies the width of a text area.
maxlength : It specifies the maximum number of characters allowed in the
textarea.
placeholder : It specifies a short hint that describes the expected value of a textarea. For example placeholder = “your address”
required : It specifies that textarea must be filled out. i.e. It cannot be
blank.
Syntax :
<textarea name = “tal” rows = “5” cols = “30” placeholder = “your address”
required> </textarea>
<Select> tag : <select> tag is used. to create drop-down list.
The attributes of <select> tag are:
1) Name – Assigns name to the control.
2) Multiple – It allows the user to select more than one value.
3) Size – The size attribute is used to specify the number of visible values.
The <option> tag inside the <select> tag defines the available options in
the list. The attributes of <option> tag are :
1) selected : To define preselected option, ‘selected’ attribute is
added to the <option>
2) value : It assigns value to the option specified in the dropdown list.
Example | Program:
<!DOCTYPE html>
<html>
<head><title>Form with Input elements</title></head>
<body bgcolor=”orange”>
<h1>use of form</h1>
<form >
Enter your name <input type=”text” Name=”n1″ maxlength=”20″><Br>
Enter your standard : <input type =”radio” name=”r1″ value=”11″> 11<sup>th</sup>
<input type=”radio” name=”r1″ value=”12″>12<sup>th </sup><br> Choose your optional subjects : <br>
<input type=”checkbox” name=”c1″ Value=”Hindi”>Hindi<br>
<input type=”checkbox” name=”c2″ Value=”German”>German<br>
<input type=”checkbox” name=”c3″ Value=”Biology”>Biology<br>
<input type=”checkbox” name=”c4″ Value=”IT”>IT<br> <input type=”submit” value=”Submit”><br>
</form></body></html>
Example | Program:
<!DOCTYPE html>
<html>
<head><title> Form elements and textarea </title></head>
<body bgcolor = “cyan” text =”Red”>
<h1> Use of form elements </h1>
<form method = “post” action = “data.php”>
Enter your name: <input type = “text” name = “fn”> <br>
Select your city : <select name=”ct”>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
</select><br>
Enter your address: <textarea name = “address” rows = “3” cols = “30” placeholder = “your address” required> </textarea> <br>
<input type = “submit” value = “send”>
</form></body> </html>
Web Title: forms controls in html5
