Forms are use to add an element of interactivity to website. HTML forms are use to collect different kinds of user input. Form elements are elements that allow the user to enter information in a form (like text fields, text area fields, drop-down menus, radio buttons, check boxes, and other).
Syntax Of HTML From
<from>
. . .
</from>HTML From Tags
| Tags | Description |
| From | HTML from to enter input by the use side. |
| Input | Input control. |
| button | Clickable button. |
| option | Option in a drop down list. |
| optgroup | Related Option in a drop down list. |
| label | Label for an input element. |
| textarea | Multi-line input control. |
| fieldset | Related element in a from |
| select | This tag is used to create combo box and multiple selection box. |
| legend |
Form tags Attributes
- Name
- text
- Method
- Get
- Post
- Action.
- URL
- Accept-charset
- character_set
- Autocomplete
- on
- off
- enctype.
- Target
- self
- top
- blank
- parent
<html>
<body>
<h1>this is a from tag</h1>
<form
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input tags Attributes
- Readonly
- Type
- Name
- Id
- Autofocus
- Required
- Title
- Enabled
- Disabled
- Size
- Maxlenght
- Pattern
- Min
- Max
- Autocomplete
- Value
- Placeholder
- Accesskey
<html>
<body>
<h1>The input tag attribute</h1>
<form >
<label for="lname">last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="fname">first name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="on"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Button tags Attributes
- Form
- from_id
- Formaction
- URL
- formmethod
- get
- post
- formtarget
- blank
- self
- top
- framename
- type
- button
- reset
- submit
- value
- text
- disabled
- disabled
- autofocus
- autofocus
<html>
<body>
<h1>The button tag attributes </h1>
<button type="button">Click Me!</button>
</body>
</html>
Option tags Attributes
- selected
- selected
- label
- text
- value
- text
- disabled
- disabled
<html>
<body>
<h1>The option tags Attributes</h1>
<label for="book">select a book:</label>
<select id="book">
<option value="english">English</option>
<option value="hindi">Hindi</option>
<option value="computer">Computer</option>
<option value="moral">Moral</option>
</select>
</body>
</html>
optgroup tags Attributes
- disabled
- disabled
- label
- text
<html>
<body>
<h1>The option tags Attributes</h1>
<label for="book">select a book:</label>
<select name="book"id="book">
<optgroup label="Main subject">
<option value="english">English</option>
<option value="hindi">Hindi</option>
<option value="computer">Computer</option>
<option value="moral">Moral</option>
</optgroup>
<optgroup label="option subject">
<option value="EVS">EVS</option>
<option value="SST">SST</option>
<option value="Sankrit">Sankrit</option>
<option value="GK">GK</option>
</optgroup>
</select>
</body>
</html>
label tags Attributes
- for
- element_id
- from
- from_id
<html>
<body>
<h1>The label tags Attributes</h1>
<input type="radio" id="Maths" name="fav_language" value="maths">
<label for="Maths">Maths</label><br>
<input type="radio" id="EVS" name="fav_language" value="EVS">
<label for="EVS">EVS</label><br>
<input type="radio" id="SST" name="fav_language" value="SST">
<label for="SST">SST</label><br><br>
<input type="submit" value="Submit">
</body>
</html>
textarea tags Attributes
- cols
- number
- dirname
- textareaname.dir
- autofocus
- autofocus
- disabled
- disabled
- maxlenght
- number
- form
- form_id
- name
- text
- placeholder
- text
- readonly
- readonly
- rows
- number
- requied
- requied
- wrap
- hard
- soft
<html>
<body>
<h1>The textarea tags Attributes</h1>
<p><label for="wordpress">wordpress best website </label></p>
<textarea id="wordpress" name="wordpress" rows="5" cols="30"> This page highlights some of the most significant changes to the product since the May 2022 release of WordPress 6.0. You will also find resources for developers and anyone seeking a deeper understanding of WordPress.</textarea>
<br> <br> <br>
<input type="submit" value="Submit">
</body>
</html>
fieldset tags Attributes
- name
- text
- from
- from_id
- disabled
- disabled
<html>
<body>
<h1>The fieldset tags Attributes</h1>
<form action="/action_page.php">
<fieldset>
<legend>Personal infro</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Select tags Attributes
- autofocus
- autofocus
- disabled
- disabled
- from
- from_id
- multiple
- multiple
- size
- number
- required
- required
- name
- name
<html>
<body>
<h1>The select tags Attributes</h1>
<label for="App">select the online App:</label>
<select name="App" id="App">
<option value="tata cliq">tata cliq</option>
<option value="ajio">ajio</option>
<option value="flipkart">flipkart</option>
<option value="myntra">myntra</option>
</select>
<br><br>
<input type="submit" value="Submit">
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about HTML table tags please check Wikipedia link click here
Stay Connected Stay Safe. Thank you
0 Comments