Creating HTML Forms

Making HTML Forms the easy way: 

creating HTML Forms : Forms are used to communicate with the website users. Forms are also used to capture information and develop surveys. HTML forms are quite handy and useful. ‘<form> </form>’ tag contains the form elements. Below is the list of HTML form elements:

Fieldset Element:<fieldset></fieldset>’ is an optional feature of HTML forms; it is used just to control the layout of set of different fields placed within an HTML form. Briefly speaking, it has nothing to do with the form itself, it helps in organizing and putting together the form elements. It will place border line outside the form elements placed inside it.

HTML form with fieldset explained

Legend:<legend></legend>’  is a part of fieldset; it is always visible to the user unlike <form> tag which remains invisible unless made visible using CSS. The legend shows the name given to the set of fields inside a form.

Dislpaying a fieldset in HTML

Label: <label></label>’ is used to name HTML input fields. A label is assigned to each input field of HTML form. In above example, “Name” and “Address” are labels while the boxes against them are input fields.

Input:<input/>’ is used to take user entered data in HTML forms. An input does not have any name, it is assigned name using ‘<label></label>’ tags.  The boxes in above picture are meant for input.  Input tag has five possible attributes that are type, id, value, size and maxlength.

Input Type: It determines the type of input e.g. text, password, check boxes, buttons and hidden fields.

Input ID: ID is used to refer to the input field; this is useful only when input field data is to be transported using some programming language.

Input Value: The value is a specific text we define inside the input value attribute. The text so written will display in the input field as default text. For instance, the default text appearing in Google Search is Input Value.

Input Size: This field will set the number of characters that are displayed.

Input Maxlength: It restricts input to the set length of characters.

 

Building a Basic Form with Input and Password Fields:

 

Sample Code for HTML form

    <h1>HTML Form with Basic Input and Password</h1>

    <form action = “”>

      <fieldset>

        <legend>A Basic Form</legend>

        <p>

          <label>User Name</label>

          <input type = “text” />

    </p>

                                <p>

                                                               

          <label>Password</label>

          <input type = “password”

                 id = “pwd”

                 value = “secret” /></p>

                                                                                <p>                                       

                                                                                                                                 <label>Email</label>

          <input type = “text” />

        </p>

   </fieldset>

</form>

There are four items in the above form. There is a fieldset which wraps around the entire form set, we have named it as “A Basic Form”. Then there is an input field named “User Name”. It is a text field. On the third is Password field which will take passwords and will display asterisk only. The last field is “Email”; it will take text input for email address.

Leave a Reply