Here in this article, we have covered the most common and widely used form nested elements. The <form> element is generally used to provide a form like structure, and its elements describe the various fields and buttons for that structure.
HTML <input> Element
<input> is the most common element used in a form. It creates an input block where the user can enter or select data. <input> type element decides which type of input should be represented on the form block. By default the
type
attribute value is
text
, but the developer can change the type value and provide the appropriate input block.
Example
<form> Name: <input type="text" name="name"><br> DOB: <input type="date" name="DOB"><br> Email: <input type="email" name="email"><br> File: <input type="file" name="doc"><br> Password: <input type="password" name="pass"><br> <input type="submit" value="Signup"> </form>
Output
Name: DOB: Email: File: Password:
<note> It is very important to mention the name attribute in the input element because, at the backend, programming language handles the form data using its name.
Type attribute values
- button
- checkbox
- color
- date
- datetime-local
- file
- hidden
- image
- month
- number
- password
- radio
- range
- reset
- search
- submit
- tel
- text
- time
- url
- week
HTML <select> Element
The <select> element is used to create a drop-down list. It also contains <option> element which represents various options for the drop-down list.
Example
<form> Select your favourite colour <select id="colour" name="colour"> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="black">Black</option> </select> </form>
Output
Select your favourite colourRedBlueGreenBlack
Multiple Attribute
By default, the <select> element allows us to select only one option but using the
multiple
attribute we can select more than one option.
Example
<form> Select your favourite colours<br> <select id="colour" name="colour" multiple> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> <option value="black">Black</option> </select> </form>
Output
Select your favourite coloursRedBlueGreenBlack
HTML <textarea> Element
<texarea>
element is an extension of
<input type="text">
element. <textarea> is generally used to represent multi-line input fields.
Example
<form> Comment: <br> <textarea name="comment" rows="10" cols="90"> Please Comment..... </textarea> <br> <input type="submit" value="Post"> </form>
Output
Comment: Please Comment.....
The rows and cols attributes specify the height and width of text area input.
<button> Element
<button> element creates a clickable button and it can be used as a replacement for
<input type="submit">
element.
Example
<form> Name:<input type="text" name="name"> <button type="submit"> Click Here</button> </form>Output:
Name: Click Here
HTML <fieldset> and <legend> Elements
- The <fieldset> element is used to represent a group of relatedble data.
- <legend> element provide a caption to the feildset data.
Example
<form action="/login.php"> <fieldset> <legend>Login:</legend> <label for="Username">Username:</label> <input type="text" id="Username" name="Username"> <label for="pass">Password:</label> <input type="Password" id="pass" name="pass"> <input type="submit" value="Login"> </fieldset> </form>
Output
Login:Username: Password:
HTML <datalist> Element
<datalist>
element is used to specify some pre-defied options for the
input
block. The
list
attribute of input must be equal to the
id
attribute of <datalist>. <datalist> element is similar to the <select> element, but instead of direct selecting the option the user can write the input for the selection. Like the <select> element, in <datalist> we mention some predefined options for the input block.
Example
<form action="/data.php"> Colour: <input list="colour"> <datalist id="colour"> <option value="RED"> <option value="Green"> <option value="Blue"> <option value="Black"> </datalist> <button type="submit"> Post </button> </form>
Output
Colour: Post
Summary
- The <input> element define an input block where the user can enter data.
- The type attribute of input specifies what type of data must be entered.
- Every form must contain a submit button to process the data.
- <label> element is used to provide a caption to input blocks.
- <feildset> is used to group similar data.
- <option> element can be used with <select> and <datalist> elements.
- <datalist> is used to predefined some options for input block.
People are also reading: