The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute.
The <form> element is a container for different types of input elements,
such as:
1. Text box (<input type=“text”>):single line of text
2. Text area(<textarea></textarea>) : big textbox
3. Radio button(<input type=“radio” name=“gen”>) :only one
selection
4. Checkbox (<input type=“checkbox”>) : multiple selection
5. Button(<input type=“button” value=“login”>)
6. Submit button(<input type=“submit”>)
1. Textbox: it is used to enter only single line of text and not able to enter multiple line of text. And we
can use textbox in the form by using <input> tag and type attribute.
<form>
Username : <input type=”text”>
Password : <input type=”text”>
</form>
2. Textarea : it is used to enter multiple line of text and we can enter multiple lines in this input type ,
Address : <textarea> </textarea>
3. Radio button : It is used to select only one option from the list of options either 1 option or second
option but not able to select both the options.
Gender : <input type=”radio” name=”gender”>Male
<input type=”radio” name=”gender”>Female
4. Check box : it is used to select multiple items from the list of elements.
<input type=”checkbox”>BCA4<br>
<input type=”checkbox”>MCA<br>
<input type=”checkbox”>Mtech<br>
<input type=”checkbox”>BE
5. Button(Command Button) : it is used to click then button
<input type=”button” value=”login”>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
6. Submit button : it is used to submit the data entered by the user to the server after entering all the data
the form will be empty.
<input type=”submit” value=”submit”>
Attributes of <Form> tag
1. Action: it indicates after entering all the data where the information should store.
2. Target : it indicates after entering all the information where the response or output will display
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the
window
3. Method :
4. Autocomplete (is on or off)
The autocomplete attribute specifies whether a form should have auto complete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user
has entered before.
5. no validate
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>
The HTML <form> Elements
1.<input>: it contains various input elements.
2.<label> : used to give the label for the element.
3.<select> : also called as drop down list
4.<textarea> : big textbox
5.<button>(<button type=”button”>CLICK ME
6.<fieldset>
7.<legend>
8.<datalist>
9.<output>
10.<option> : same as<select> drop down list.
11.<optgroup>
3. The <select> Element
The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size=”3” multiple>
<option value="Volvo">Volvo</option>
<option value="Maruti 800"> Maruti 800</option>
<option value="fiat">Fiat</option>
<option value="Audi">Audi</option>
</select>
4. <Textarea> : it is a big textbox used to enter multiple line of text.
Address : <textarea></textarea>
5.<Button>: it is used to add button in the web page.
<button type=”button” onclick=”alert(‘hi welcome’)”>CLICK ME
6.<Fieldset> & <legend> : it is used to organise the data and elements.
<fieldset>
<legend>PERSONAL DATA</legend>
Firstname : <input type=”text”>
Lastname : <input type=”text”>
DOB:<input type=”date”>
</fieldset>
7.<datalist> : same as <select> drop down list.
8.<optgroup> : is
