Elements of Forms in HTML
Last time we have seen, Use of Forms in HTML. Now we are going to learn about Elements of Forms in HTML. So let's get started...
Elements of Forms
In HTML, Form includes various elements which is used to create an interactive Form. Let's take a look at them...
- <label> Element
- <input> Element
- <select> Element
- <option> Element
- <button> Element
- <textarea> Element
- <fieldset> Element
- <legend> Element
1. <label> Element
The <label> element is used to
define the title to various form elements. It is very useful for users
while interacting with the website using the label tag.
I specify the meaning and appearance of the components on the web page.
It is mostly used for defining the Title of an Input Element.
It uses the for attribute to bind
the Input Element of Form with the Label. The value of this attribute and
the id of the input element must be the same to bind them together.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Label Element of Form </title>
</head>
<body>
<h2> Label Element of Form </h2>
<form>
<label for="name">Name : </label>
<br>
<input type="text" id="name" >
</form>
</body>
</html>
2. <input> Element
The <input> element is used
to create form elements like Textfield, Checkbox, buttons, Radiobutton,
and so on. This tag also uses the
type attribute to specify the type
of the Component element.
For detailed information on <input> element types, visit our blog
on Input Element Types.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Input Element of Form </title>
</head>
<body>
<h2> Input Element of Form </h2>
<form>
<input type="checkbox" id="demo-checkbox" >
<label for="demo-checkbox">Hello, I am a Checkbox...!!!</label>
</form>
</body>
</html>
3. <select> Element
The <select> element is used
to create a group of options using the <option> Form Element. It
creates the DropDown List of defined Components.
This element has its own special attribute named
size. By default select element
initially displays only one component of the list on the webpage, but
using this attribute you can initially display any number of components
of a list on the webpage.
The select element also uses the
"multiple" attribute, which is used
to enable the multiple selections of components in the DropDown List.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Select Element of Form </title>
</head>
<body>
<h2> Select Element of Form </h2>
<form>
<label for="fav-color">Favourite Color : </label>
<br><br>
<select id="fav-color" name="fav-color" size="3">
<option>Black</option>
<option>Violet</option>
</select>
</form>
</body>
</html>
4. <option> Element
As we have seen earlier, the option element is used to define the
components of the DropDown List. You must assign a value to
<option> element, every time
you create it in a DropDown List.
The <option> element is able to change the visibility of the
initial component i.e. pre-selected component of the DropDown List,
using the attribute selected.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Option Element of Form </title>
</head>
<body>
<h2> Option Element of Form </h2>
<form>
<label for="fav-color">Favourite Color : </label>
<br>
<select id="fav-color" name="fav-color">
<option value="red">Red</option>
<option value="green">Grren</option>
<option value="black" selected>Black</option>
<option value="violet">Violet</option>
</select>
</form>
</body>
</html>
5. <button> Element
The <button> element
is used to create a simple button with the Text String defined by the
developer. It has basic attributes like class, id, name, value and so
on apart from this, it has one main attribute which is
type.
The type attribute defines the
type of button that is created or that is needed to create. The value
of the type attribute can be a button, reset, submit, and so on, for
the <button> element.
For detailed information on Creating Buttons in HTML, visit our blog on
Ways to create Buttons in HTML.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Button Element of Form </title>
</head>
<body>
<h2> Button Element of Form </h2>
<br>
<form>
<button type="button"> Click Me... </button>
</form>
</body>
</html>
6. <textarea> Element
The <textarea> Element
is mostly used, to collect user responses and reviews. It allows users
to give a large amount of input.
It has attributes like rows and
cols that are used to define the
specification of the Textarea Element. The
rows attribute defines the number of lines of the text area. The
cols attribute defines the width of
the text area via columns.
Example :
<!DOCTYPE html>
<html>
<head>
<title> TextArea Element of Form </title>
</head>
<body>
<h2> TextArea Element of Form </h2>
<br>
<form>
<textarea cols="70" rows="7"> Enter Data Here...!!! </textarea>
</form>
</body>
</html>
7. <fieldset> Element
The <fieldset> element is
used to create a group of related Elements of Form. It draws a thin line
around a defined group of form elements.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Fieldset Element of Form </title>
</head>
<body>
<h2> Fieldset Element of Form </h2>
<form>
<fieldset>
<label for="fname">First Name : </label>
<input type="text" id="fname" name="first-name">
<br>
<label for="lname">Last Name : </label>
<input type="text" id="lname" name="last-name">
</fieldset>
</form>
</body>
</html>
8. <legend> Element
The <legend> element is specially used to define the Title for the Fieldset Form
Element. It species the title for a group of related components of Form
Elements.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Fieldset Element of Form </title>
</head>
<body>
<h2> Fieldset Element of Form </h2>
<form>
<fieldset>
<legend>User's Name...</legend>
<label for="fname">First Name : </label>
<input type="text" id="fname" name="first-name">
<br>
<label for="lname">Last Name : </label>
<input type="text" id="lname" name="last-name">
</fieldset>
</form>
</body>
</html>
So, now it's time to end the session. See you guys Next Time, stay
tuned for further updates on HTML Programming Languages...!!!
Our website will definitely help you to improve your
Programming Skills and Knowledge.
Thanks for Visiting...!!!
0 Comments
Please do not add Any Spam link in Comments !