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).

Home Page - Basic Engineer
Home Page – Basic Engineer

Syntax Of HTML From

<from>
. . . 
</from>

HTML From Tags

TagsDescription
FromHTML from to enter input by the use side.
InputInput control.
buttonClickable button.
optionOption in a drop down list.
optgroupRelated Option in a drop down list.
labelLabel for an input element.
textareaMulti-line input control.
fieldsetRelated element in a from
selectThis 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>
 this is a Form tag example

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>
the input tag attribute example

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>
the button tag attributes example

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>
the option tags Attributes example

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>
the optgroup tags attributes example

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>
the label tags attributes example

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>
the textarea tags attributes example

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>
the fieldset tags attributes example

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>
The select tags attributes example

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


Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *