Basic HTML Form Controls
Basic HTML Form Controls
Text
Box:
The
size Attribute
The
size attribute specifies the size (in characters) for the input field.
The
maxlength Attribute
The
maxlength attribute specifies the maximum allowed length for the input field.
<form
action="">
First Name: <input
type="text" name="firstname" value="Piyush"
size="40"><br/>
Last Name: <input
type="text" name="lastname" maxlength="10">
</form>
Example:
<form
action="" method="">
First name:<input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
E-mail: <input type="email"
name="email" ><br>
<input type="submit">
</form>
Combo
Box/List Box:
The
<select> Element
The
<select> element defines a drop-down list:
<select
name="cars">
<option
value="volvo">Volvo</option>
<option
value="rits">Ritz</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
The
<option> elements defines an option that can be selected.
By
default, the first item in the drop-down list is selected.
To
define a pre-selected option, add the selected attribute to the option:
<option
value="fiat" selected>Fiat</option>
Textarea
(Multiline Textbox):
The
<textarea> Element
The
<textarea> element defines a multi-line input field (a text area):
<textarea
name="message" rows="10" cols="30">
Shree
Matrumandir College,
A-54,
Panchayat Nagar,
Uni
Road,
Rajkot.
</textarea>
The
rows attribute specifies the visible number of lines in a text area.
The
cols attribute specifies the visible width of a text area.
Buttons
(Simple Button/Submit Button/Reset Button):
The
<button> Element
The
<button> element defines a clickable button:
<button
type="button">Click Me!</button>
Input
Type Submit
<input
type="submit"> defines a button for submitting form data to a
form-handler.
Input
Type Reset
<input
type="reset"> defines a reset button that will reset all form
values to their default values:
Example:
<form
action="">
First name:<br>
<input type="text"
name="firstname" value="Piyush"><br>
Last name:<br>
<input type="text"
name="lastname" value="Patel"><br><br>
<input type="submit"
value="Submit">
<input type="reset">
</form>
Radio
Button/Option Button
<input
type="radio"> defines a radio button.
Radio
buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Check
Box:
<input
type="checkbox"> defines a checkbox.
Checkboxes
let a user select ZERO or MORE options of a limited number of choices.
<form>
Courses:
<input type="checkbox" name="SSC" value="ssc"> SSC<br>
<input type="checkbox" name="HSC" value="hsc"> HSC<br>
<input type="checkbox" name="BSc." value="bsc"> BSc.
</form>
Comments
Post a Comment