ICICT Nigeria

Nigeria Institute Of Computing and ICT.

Introductions To Form In HTML

HTML Form Control Elements

Control elements that are commonly used:

  • Text boxes for text and numerical entries
  • Selection lists for long lists of options, usually appearing in a drop-down list box
  • Radio buttons, also called option buttons, to select a single option from a predefined list
  • Check boxes to specify an item as either present or absent
  • Groups boxes to organize form elements
  • Text areas for extended entries that can include several lines of text
  • Buttons that can be clicked to start processing the form
  • Each control element in which the user can enter information is called a field.
  • Information entered into a field is called the field value, or simply the value.
  • In some fields, users are free to enter anything they choose.
  • Other fields, such as selection lists, limit the user to a predefined list of options.

The <form> Tag

The <form> tag identifies the beginning and end of a form. A single page can include several different forms, but you cannot nest one form inside another.
The general syntax of the <form> tag is:
<form attributes>
    form elements and layout tags
</form>
Between the <form> and </form> tags, place the various tags for each of the fields in the form.
Use standard HTML tags to specify the form’s appearance.

A single Web page can contain multiple forms, the <form> tag includes the name attribute.
The name attribute identifies each form on the page.
The name attribute is also needed for programs that retrieve values from the form.

Input Types 

The picture below shows other supported HTML input types. 

 

Working with Text Boxes

  • Text boxes are created using the <input> tag.
  • The general syntax is:
<input type=“type” name=“name” id=“id”>
  • Type specifies the type of input field name and id attributes identifies the input field for the CGI script
  • To create a text box, you would enter the tag:
<input type=“text”>
  • If the type attribute is not included, the Web browser assumes, by default, that you want to create a text box.

The name and id Attribute

  • The name and id attributes of the <input> tag identifies the input field for the CGI script.
  • The name attribute represents the older standard, but it is deprecated in HTML 4.01, however, some CGI scripts still recognize only the name attribute
  • The newest standard uses the id attribute.
  • The id attribute is required, if a form contains form labels.
  • It is best to duplicate the information by using both the name and id attributes.

How To Create a Text Box

  • To create a text box, use the following HTML code:
<input name=“name” id=“id” value=“value” size=“value” maxlength=“value”>
  • Name and id attributes identify the field
  • Value attribute assigns a default value to the text box
  • Size attribute defines the width of the text box in number of characters
  • Maxlength attribute defines the maximum number of characters allowed in the field

How to Create a Password Field

  • A password field is a text box in which the characters typed by the user are displayed as bullets or asterisks i.e. ****.
  • The syntax for creating a Password field is:
<input type=“password”>
  • Using a password field should not be confused with having a secure connection.
  • The password itself is not encrypted.
  • The password field only acts as a mask for a field entry as it is entered.
My Next Topic On Form Will Be Working with Form Labels Please Stay Tunned.

Click Here To See 19 Steps To Creating A Web Form With HTML With Source Codes.

4 comments:

  1. I have read and applied the 19 steps to creating online form with html on this your blog before i saw this tutorial but guess what Guy?
    it was confusing at first but with this little tutorial now i've been able to get something to my head please i am following your blog keep updating

    ReplyDelete
    Replies
    1. I'm glad this helps you thanks for dropping your comment please share with your friends

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Wow i must Admit you've done a great job...

    ReplyDelete