HTML Form Element and tags

  Blog Desk       May 2, 2021     977 8 Comments
html-form-element

<form> HTML Form Element and Tags

HTML form “<form>” element and tags is used to collect and send information to an email or database. The <form> element can contain various input elements.

When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form element.

HTML Form Element and Tags Attributes

Following is a list of the most frequently used form attributes:

S.N. Attribute & Description
1 Action: Backend script ready to process your entered data in form elements.
2 Method: Method to be used to upload data. The most frequently used are POST and GET methods.
3 Target: Specify the target window or frame where the result of the script will be displayed. We can set values like _blank, _self, _parent etc.
4 Enctype: specify how the browser encodes the data before it sends it to the server. Possible values are −

Enctype=”mutlipart/form-data”− This is used when you want to upload binary data in the form of files like image, word or pdf file etc.

Enctype=”application/x-www-form-urlencoded” − This is the standard method most forms use in simple scenarios.

HTML Form Controls

There are different types of form controls that is used to collect data using HTML form element and tags.

  • Input type text
  • Input type password
  • Input type email
  • Input type Checkbox
  • Input type Radio
  • Input type Select
  • Input type File
  • Input type Hidden
  • Input type Button
  • Input type Submit and Reset Button

<input> Element

HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute.

Type Description
<input type=”text”> Displays a single-line text input field
<input type=”radio”> Displays a radio button (for selecting one of many choices)
<input type=”checkbox”> Displays a checkbox (for selecting zero or more of many choices)
<input type=”submit”> Displays a submit button (for submitting the form)
<input type=”button”> Displays a clickable button
<input type=”file”> To select files like: image, docx or pdf files

<input>: Type Text

HTML <input> elements can support any types of text input by setting the attribute type=”text”. This renders a single row input field.

<input> name Attribute

Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all.

 <label> Element

The <label> tag defines a label for many form elements.

<input>: Number Type

HTML input elements can be of type number. These input fields allow the user to enter only numbers inside the field. It is created using the <input> element but type attribute is set to number.

<input>: email Type

HTML input elements can be of type email. These input fields allow the user to enter only email inside the field. It is created using the <input> element but type attribute is set to email.

<input> Password Type

The HTML <input> element can have the attribute type=”password” that renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information or password field.

<input>: file Type

The HTML <input> element allows a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. It is created using the <input> element but type attribute is set to file.

<input>: Type Radio Button

Radio buttons are used when out of many options, just one option is required to be selected. They are created using HTML <input> tag but type attribute is set to radio.

<input>: Type Checkbox

Checkboxes are used when more than one option is required to be selected.  It is created using HTML <input> tag but type attribute is set to checkbox.

<select> Select List Element

The HTML <select> element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time.

<textarea> Element

The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element.

When rendered by the browser, textarea fields can be stretched/shrunk in size by the user, but the rows and cols attributes determine the initial size.

required Attribute

In HTML, input fields have an attribute called required which specifies that the field must include a value.

maxlength Attribute

In HTML, input fields with type text have an attribute called maxlength that specifies the maximum number of characters that can be entered into the field.

The code block shows an input text field that accepts text that has a maximum length of 10 characters.

<input> type Submit

HTML <input> elements can have a type attribute set to submit, by adding type=”submit”. With this attribute included, a submit button will be rendered and, by default, will submit the <form> and execute its action.

The text of a submit button is set to Submit by default but can also be changed by modifying the value attribute.

<input> type Reset

HTML <input> elements can have a type attribute set to reset, by adding type=”reset”. With this attribute included, a reset button will be reset all the fill out value from a form.

The text of a reset button is set to Reset by default but can also be changed by modifying the value attribute.

<input> Type Hidden

Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page.

HTML Form Validators

HTML forms allow you to specify different kinds of validation for your input fields to make sure that data is entered correctly before being submitted. HTML supports a number of different validators, including things like minimum value, minimum/maximum length, etc. The validators are specified as attributes on the input field.

Live Example


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Form Element</title>
   </head>
   <body>
      <form action="mailto:[email protected]" method="post">
         <table class="table">
            <tr>
               <td>
                  <label for="firstName">First Name</label>
               </td>
               <td>
                  <input type="text" name="firstName" required="required" maxlength="20">
               </td>
            </tr>
            <tr>
               <td>
                  <label for="lastName">Last Name</label>
               </td>
               <td>
                  <input type="text" name="lastName" required="required" maxlength="20">
               </td>
            </tr>
            <tr>
               <td>
                  <label for="email">Email</label>
               </td>
               <td>
                  <input type="email" name="email" maxlength="50">
               </td>
            </tr>
            <tr>
               <td>
                  <label for="password">Password</label>
               </td>
               <td>
                  <input type="password" name="password" minlength="8" maxlength="15">
               </td>
            </tr>
            <tr>
               <td>
                  <label for="contact">Contact Number</label>
               </td>
               <td>
                  <input type="number" name="phone" maxlength="10">
               </td>
            </tr>
            <tr>
               <td>
                  <label for="image">Image</label>
               </td>
               <td>
                  <input type="file" name="uploadImage">
               </td>
            </tr>
            <tr>
               <td>
                  <label for="gender">Gender</label>
               </td>
               <td>
                  <input type="radio" name="gender" value="male">Male
                  <input type="radio" name="gender" value="female">Female
               </td>
            </tr>
            <tr>
               <td>
                  <label for="course">Course</label>
               </td>
               <td>
                  <input type="checkbox" name="course" value="HTML">HTML
                  <input type="checkbox" name="course" value="CSS">CSS
                  <input type="checkbox" name="course" value="PHP">PHP
                  <input type="checkbox" name="course" value="Java Script">Java Script
               </td>
            </tr>
            <tr>
               <td>
                  <label for="doa">Date of Admission</label>
               </td>
               <td>
               <select name="year">
                  <option>Select Year</option>
                  <option value="2001">2001</option>
                  <option value="2002">2002</option>
                  <option value="2003">2003</option>
                  <option value="2004">2004</option>
                  <option value="2005">2005</option>
               </select>
               <select name="month">
                  <option>Select Month</option>
                  <option value="Jan">Jan</option>
                  <option value="Feb">Feb</option>
                  <option value="Mar">Mar</option>
                  <option value="Apr">Apr</option>
                  <option value="May">May</option>
               </select>
               <select name="day">
                  <option>Select Day</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
               </select>
               </td>
            </tr>
            <tr>
               <td>
                  <label for="message">Message</label>
               </td>
               <td>
                  <textarea cols="45" rows="10" placeholder="Message"></textarea>
               </td>
            </tr>
            <tr>
               <td colspan="2" align="center">
                 <input type="submit" name="submit" value="Post">
                 <input type="reset" name="reset" value="Reset">
               </td>
            </tr>
        </table>
     </form>
   </body>
</html>
form

HTML List Item Tag and Element

HTML form Reference

8 responses to “HTML Form Element and tags”

  1. I know this web site presents quality based content and extra stuff, is there any other web page which offers
    such information in quality?

    Take a look at my site 승인전화없는 토토사이트

  2. I love your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone to do it for you?
    Plz reply as I’m looking to design my own blog and would like to find out where u got this from.

    many thanks

    Stop by my homepage; vegas casino online no deposit codes

  3. Hi, i feel that i noticed you visited my weblog so i came to go back the
    choose?.I am trying to in finding things to enhance my site!I guess
    its ok to make use of some of your ideas!!

    My web site; casino online free to play

  4. Amazing blog! Do you have any recommendations for aspiring
    writers? I’m hoping to start my own blog soon but I’m a little lost on everything.

    Would you suggest starting with a free platform like WordPress or go for a paid
    option? There are so many choices out there that I’m completely
    confused .. Any suggestions? Appreciate it!

  5. 홈마사지 says:

    Hello there! I could have sworn I’ve been to this web site before
    but after browsing through a few of the posts I realized it’s new to me.
    Anyhow, I’m certainly pleased I came across it and I’ll be book-marking it and checking back frequently!

  6. I leave a leave a response when I appreciate a article on a website or if I have
    something to valuable to contribute to the discussion. It’s caused by the fire displayed in the
    post I read. And after this post HTML Form Element and tags – Yamsoti Design Master.

    I was actually excited enough to post a commenta response 😉 I actually do have a couple of
    questions for you if you don’t mind. Is it simply me or
    do some of these remarks appear like written by brain dead people?

    😛 And, if you are posting on additional online social sites, I
    would like to follow anything new you have to post.
    Could you list all of all your public sites like your linkedin profile, Facebook page or twitter feed?

    Also visit my webpage … bonus code for caesars casino online

  7. Hello There. I found your blog using msn. This is an extremely well written article.
    I’ll be sure to bookmark it and return to read more of your useful info.
    Thanks for the post. I’ll certainly comeback.

  8. Hi there i am kavin, its my first time to commenting anywhere, when i read this post i thought i could also create comment due to this sensible article.

Leave a Reply

Your email address will not be published.