Scribd
Upload
3 views

html (Ch4)

The document provides a comprehensive overview of the HTML <form> element, detailing its structure, attributes, and various form controls such as textboxes, checkboxes, radio buttons, and more. It includes examples of source code for creating forms with different input types and their respective attributes. Additionally, it covers advanced elements like fieldsets, legends, and datalists for organizing form data.

Uploaded by

kothit.97108
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

html (Ch4)

The document provides a comprehensive overview of the HTML <form> element, detailing its structure, attributes, and various form controls such as textboxes, checkboxes, radio buttons, and more. It includes examples of source code for creating forms with different input types and their respective attributes. Additionally, it covers advanced elements like fieldsets, legends, and datalists for organizing form data.

Uploaded by

kothit.97108
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

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>

You might also like