FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@coder 915

HTML Form Elements


2021-11-17 12:27 · 11 min read

HTML <form> can contain one or more of the following form elements:

Some HTML Form's Element

AttributeDetails
<input>The input field specified as using where a user can enter data
<textarea>The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows
<label>The HTML tag is used to add a Caption(label) to a form control like text, textarea
<select>The HTML select tags define a select element - a form control with a menu of options.
<option>The <option> tag in HTML is used to choose an option from a Drop-Down menu.
<button>Clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
<fieldset>The HTML element is used to group several controls as well as labels within a web form
<legend><legend> tag used to insert a title or caption to its parent element such as <fieldset>.
<datalist>The HTML <datalist> tag is an HTML5 element that defines a list of suggested values for an <input> tag.
<output>The output element represents the output of a calculation or process, performed usually by a script.

Description

The <input> Element

The input element is one of the most used form elements.

The input element has a typed attribute usually associated with a data type that allows users to edit its value. This element provides many different types of fields, according to the value present in the type attribute

<form method="post" action="form_action.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="submit">
</form>

The input type attribute is covered in the next chapter: HTML Input Type


 The HTML <textarea> have two main attribute row and cols : HTML Input Type

The <textarea> element

The HTML <textarea> element represents a multi-line plain-text editing Field, useful when you want to allow users to enter multiple lines of comment or message text,
for example a comment on a review or feedback form.

<textarea id="story" name="story"
rows="5" cols="33">
You can write multiple lines
</textarea>

The <label> element

The HTML <label> element used as label for several form elements.

<label> element is useful for a screen reader when screen reader will read label reader will read out loud the label when the user focuses on the input element.

The <label> component additionally facilitate users who have issue clicking on terribly little regions (such as radio buttons or checkboxes) - as a result of once the user clicks the text inside the <label> element, it toggles the radio button/checkbox.

<label for="male">Male</label>
<input type="radio" id="male" name="gender">
<label for="female">Female</label>
<input type="radio" id="female" name="gender">

<p>Click on label and ratio button will toggle automatically</p>

The <select> element

The element defines a dropdown list:

<label for="language">Choose a Programming Language:</label>
<select id="language" name="language">
<option value="Javascript">Javascript</option>
<option value="Java">Java</option>
<option value="PHP">PHP</option>
<option value="Swift">Swift</option>
</select>

<option>element define an option that can be selected.

One option is selected by default.

You can select the by default option with our choice by adding the selected attribute in the option you want to set by default.

 

<option value="Javascript">Javascript</option>

We learn more about input elements attribute in the next chapter: HTML Input Type

The <button> element

Clickable button used to submit forms or anywhere in a document for accessible, standard button functionality.

<button onclick="alert('Hello')">Click me</button>

The <fieldset> and <legend> element

The element is used to group related data in a form.

The <legend>element defines a title(caption) for the fieldset element.

<form method="post" action="form_action.php">
<fieldset>
<legend>Details:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="submit">
</fieldset>
</form>

The <datalist> Element.

The element specifies a list of predefined options for an input element.

Users are presented with a drop-down list of pre-defined options when entering data in the input field

<h2>The datalist Element</h2>
<form method="post" action="form_action_datalist.php">
<input list="language" name="language">
<datalist id="language">
<option value="Javascript">
<option value="Java">
<option value="PHP">
<option value="Swift">
</datalist>
<input type="submit" value="Submit">
</form>

Note: The datalist tag is not supported in Safari prior version 12.1.

The <output> Element

The output element represents the output of a calculation or process, performed usually by a script.

<p>Change or enter value in input field and output will be display in output tag</p>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
</form>
TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© blog.theprodevelopers.com 2024. All Rights Reserved. Powered by Pro Developer