HTML FORMS PART 2 ON FORMS ELEMENTS
25TH TUTORIAL 2ND PART ON
HTML FORME ELEMENTS
The <input> Element
One of the most used form
element is the <input> element.
The <input> element can be displayed in several ways, depending
on the type attribute.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label
for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname"><br><br>
<input type="submit"
value="Submit">
</form>
</body>
</html> OUTPUT
The input Element
First name:
If the type attribute is omitted, the input field gets the
default type: "text".
All the different input types are covered in the next
chapter: HTML Input Types.
The
<select> Element
The <select> element
defines a drop-down list:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down
list:</p>
<form
action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
OUTPUT
The select Element
The select element defines a drop-down list:
Choose a car:
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:
The
<textarea> Element
The <textarea> element
defines a multi-line input field (a text area):
Example
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a
multi-line input field.</p>
<form
action="/action_page.php">
<textarea name="message" rows="10"
cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
Textarea
The textarea element defines a multi-line input
field.
The
<button> Element
The <button> element
defines a clickable button:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
OUTPUT
The button Element
Click Me!
The
<fieldset> and <legend> Elements
The <fieldset> element
is used to group related data in a form.
The <legend> element
defines a caption for the <fieldset> element.
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with
Fieldset</h2>
<p>The fieldset element is used to group
related data in a form, and the legend element defines a caption for the
fieldset element.</p>
<form
action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname"
name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname"
name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
OUTPUT
Grouping Form Data
with Fieldset
The fieldset element is used to group related data
in a form, and the legend element defines a caption for the fieldset element.
Personalia:First name:
Last name:
The
<datalist> Element
The <datalist> element
specifies a list of pre-defined options for an <input> element.
Users
will see a drop-down list of the pre-defined options as they input data.
The list attribute
of the <input> element, must refer to the id attribute
of the <datalist> element.
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list
of pre-defined options for an input element.</p>
<form
action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist
tag is not supported in Safari prior version 12.1.</p>
</body>
</html>
Comments
Post a Comment