HTML
Chapter (4)
Hyper Text Markup Language
The <form> Element
• The HTML <form> element defines a form that is used to
collect user input:
• <form>
.
form elements
.
</form>
• An HTML form contains form elements.
• Form elements are different types of input elements, like text
fields, checkboxes, radio buttons, submit buttons, and more.
How to create Form?
<form>
Form Elements
</form>
Attributes of form element
name Any characters
method get/ post
action Backend script ready to process
your passed data.
Form Control
1. Textbox 14. Button Element
2. Password 15. Scrolling Textbox
3. Email 16. Select List
4. Uniform Resource Location-url 17. Label
5. Checkbox 18. Datalist
6. Radio 19. Fieldset and Legend
7. Telephone
8. Color
9. Calendar
10. Slider
11. Spinner
12. Button (Submit / Reset)
13. Image Button
( 1 to 13) -<input type=” “ >
Attributes of Textbox
type text
name Alphanumeric (begin with a letter)
(no space)
size Numeric value
maxlength Numeric value
value Any characters
placeholder Any characters
disabled -
readonly -
required -
autofocus -
tabindex Numeric value
accesskey Keyboard character
Source Code
<body>
<form name=“ftext” method=“get/post”>
<table border=“1”>
<tr>
<td> First Name: </td>
<td> <input type=“text” name=“txtFName” value=“Fill
data”> </td>
</tr>
<tr>
<td> Last Name:</td>
<td> <input type=“text” name=“txtLName” value=“Fill
data”> </td>
</tr>
</table>
</form>
Attributes of Password
type password
name Alphanumeric (begin with a letter)
(no space)
size Numeric value
maxlength Numeric value
value Any characters
placeholder Any characters
disabled -
readonly -
required -
autofocus -
tabindex Numeric value
accesskey Keyboard character
Source Code
<body>
<form name=“fpassword” method=“get/post”>
<table border=“1”>
<tr>
<td> User Name: </td>
<td> <input type=“text” name=“txtName” value=“Fill data”>
</td>
</tr>
<tr>
<td> Password: </td>
<td> <input type=“password” name=“pwdName”>
</td>
</tr>
</table>
Source Code of Email, url
and tel
<body>
<form name=“ftext” method=“get/post”>
Email : <input type="email" name="myEmail"
id="myEmail">
Suggest a Website<input type="url" name="myWebsite"
id="myWebsite">
Mobile Number<input type="tel" name="mobile"
id="mobile">
</form>
</body>
Attributes of Checkbox
type checkbox
name Alphanumeric (begin with a letter)
(no space)
value Any characters
disabled -
readonly -
required -
autofocus -
autofocus -
tabindex Numeric value
accesskey Keyboard character
Source Code
<body>
<form name=“fcheck” method=“get/post”>
<input type=“checkbox” name=“chkCat” value=“Cat”> Cat <br>
<input type=“checkbox” name=“chkBird” value=“Bird”> Bird <br>
<input type=“checkbox” name=“chkDog” value=“Dog”> Dog
</form>
</body>
Attributes of radio button
type radio
name Alphanumeric (begin with a letter)
(no space)
value Any characters
disabled -
readonly -
required -
autofocus -
autofocus -
tabindex Numeric value
accesskey Keyboard character
Source Code
<body>
<form name=“fradio” method=“get/post”>
<input type=“radio” name=“radAnimal” value=“Cat”> Cat <br>
<input type=“radio” name=“radAnimal” value=“Bird”> Bird <br>
<input type=“radio” name=“radAnimal” value=“Dog”> Dog
</form>
</body>
Attributes of color
type color
name Alphanumeric (begin with a letter)
(no space)
size Numeral
<body>
<form name=“fcolor” method=“get/post”>
Select Color : <input type=“color” name=“clName”>
</form>
</body>
Attributes of calendar
type date/ time/ week / month/datatime-local
name Alphanumeric (begin with a letter)
(no space)
size Numeral
<body>
<form name=“fcalendar” method=“get/post”>
Date of Birth : <input type=“date” name=“DOB”> <br>
Course Time : <input type=“time” name=“CTime”>
</form>
</body>
Attributes of spinner
type number
name Alphanumeric (begin with a letter)
(no space)
value Any characters
min Numeral
max Numeral
size Numeral
step Numeral
<body>
<form name=“fnumber” method=“get/post”>
Number Count:<input type=“number” min=“0" max=“10” name=“num”>
</form>
</body>
Attributes of slider
type range
name Alphanumeric (begin with a letter)
(no space)
value Any characters
min Numeral
max Numeral
size Numeral
step Numeral
<body>
<form name=“frange” method=“get/post”>
10 <input type="range” step=“5” min="10" max="50“
name=“rg”> 50
</form>
</body>
Attributes of submit/reset
type submit/ reset
name Alphanumeric (begin with a letter)
(no space)
value Any characters
<body>
<form name=“CV” method=“get/post”>
UserName: <input type=“text” name=“txtName” required> <br>
Password: <input type=“password” name=“pwdName” required> <br>
<input type=“submit” name=“btnInsert” value=“Insert”> <br>
<input type=“reset” name=“btnClear” value=“Clear”>
</form>
</body>
Attributes of Image button
type image
src .jpeg / .jpg/ .png/ .gif
name Alphanumeric (begin with a letter)
(no space)
alt/ title Any characters
width Numeral
height Numeral
Attributes of button with
image
type submit / reset
name Alphanumeric (begin with a letter)
(no space)
alt/ title Any characters
Source Code
<body>
<form name=“CV” method=“get/post”>
UserName: <input type=“text” name=“txtName” required>
<br>
Password: <input type=“password” name=“pwdName” required> <br>
<input type=“image” src=“Tulips.jpg” width=“100” height=“100”
name=“imgInsert”>
<input type=“reset” name=“btnClear” value=“Clear”>
</form>
</body>
Attributes of Scrolling Textbox
name Alphanumeric (begin with a letter) (no
space)
cols Numeral
rows Numeral
maxlength Numeral
disabled -
readonly -
required -
autofocus -
Source Code
<body>
<form name=“CV” method=“get/post”>
UserName: <input type=“text” name=“txtName” required> <br>
Password: <input type=“password” name=“pwdName” required> <br>
<button type=“submit” name=“btnInsert”>
<img src=“Tulips.jpg” width=“100” height=“100”>
</button>
<button type=“reset” name=“btnClear”>
<img src=“Tulips.jpg” width=“100” height=“100”>
</button>
</form>
</body>
Source Code
<body>
<form name=“CV” method=“get/post”>
UserName: <input type=“text” name=“txtName” required> <br>
Password: <input type=“password” name=“pwdName” required> <br>
Feedback: <textarea name=“txtCmt”> Fill Comment </textarea>
<br>
<input type=“submit” name=“btnInsert” value=“Insert”>
<input type=“reset” name=“btnClear” value=“Clear”>
</form>
</body>
Attributes of Select
name Alphanumeric (begin with a letter) (no space)
size Numeral
multiple .
Attributes of Option
value Any characters
selected -
Source Code
<body>
<form name=“flist” method=“get/post”>
Fruit List:<br>
<select name="Fruit">
<option value="Apple"> Apple </option>
<option value="Orange"> Orange </option>
<option value="Lime"> Lime </option>
<option value="Lemo"> Lemo </option>
</select>
</form>
</body>
Source Code
<body>
<form name=“flist” method=“get/post”>
Fruit List:<br>
<select name="Fruit" size="3" multiple>
<option value="Apple"> Apple </option>
<option value ="Orange" selected> Orange </option>
<option value ="Lime" selected> Lime </option>
<option value ="Lemo"> Lemo </option>
</select>
</form>
</body>
Datalist
<body>
<form name=“flist” method=“get/post”>
<input type=”text” name=”txtColor“ list=”colors“>
<datalist id=”colors“>
<option value=”Red“>
<option value=”Orange“>
<option value=”Green“>
<option value=”Pink“>
</datalist>
</form>
</body>
Label
<body>
<form name=“CV” method=“get/post”>
<label for=“lblName”> UserName: </label>
<input type=“text” name=“txtName” id=“lblName” required> <br>
<label for=“lblPwd”> Password: </label>
<input type=“password” name=“pwdName” id=“lblPwd” required> <br>
<input type=“submit” name=“btnInsert” value=“Insert”> <br>
<input type=“reset” name=“btnClear” value=“Clear”>
</form>
</body>
Fieldset and legend
<body>
<form name=“flist” method=“get/post”>
<fieldset>
<legend> Personal Information </legend>
UserName: <input type=“text” name=“txtName” required> <br>
Password: <input type=“password” name=“pwdName” required> <br>
Feedback: <textarea name=“txtCmt”> Fill Comment </textarea>
<br>
<input type=“submit” name=“btnInsert” value=“Insert”>
<input type=“reset” name=“btnClear” value=“Clear”>
</fieldset>
</form>
</body>
