HTML Forms and Input

A form is simply an area that can contain form fields.

Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons.

Forms

An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

A form is defined with the <form> tag.

Form's Action Attribute

This attribute specifies a form processing agent. User agent behavior for a value other than an HTTP URI is undefined.

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. Usually the file defined in the action attribute does something with the received input.

Form's Method Attribute

Method attribute specifies which HTTP method will be used to submit the form data set. Possible (case-insensitive) values are "get" (the default) and "post".

One can specify two different submission methods for a form in HTML. The difference between METHOD="GET" (the default) and METHOD="POST" is primarily defined in terms of form data encoding. The official recommendations say that "GET" should be used if and only if the form processing is idempotent, which typically means a pure query form. Generally it is advisable to do so. There are, however, problems related to long URLs and non-ASCII character repertoires which can make it necessary to use "POST" even for idempotent processing.

get: With the HTTP "get" method, the form data set is appended to the URI specified by the action attribute (with a question-mark ("?") as separator) and this new URI is sent to the processing agent.

post: With the HTTP "post" method, the form data set is included in the body of the form and sent to the processing agent.

enctype

This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element, type="file".

Input

The most used form tag is the <input> tag. The type of input is specified with the type attribute.

Text Fields

Text fields are used when you want the user to type something(letters, numbers, etc.) in a form. In most browsers, by default the width of the text field is 20 characters.

<form>
      First name:
      <input type="text" name="firstname">
      <br>
      Last name:
      <input type="text" name="lastname">
</form>

O/P:

Password Fields

Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.

O/P:

Radio Buttons

Radio Buttons are used when you want the user to select one of a limited number of choices.

<form>
      <input type="radio" name="sex" value="male"> Male
      <br>
      <input type="radio" name="sex" value="female"> Female
</form>

O/P:

Checkboxes

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

O/P:

Textarea

A text-area is a multi-line text input control. A user can write text in the text-area. In a text-area you can write an unlimited number of characters.

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be.

Another attribute to be aware of is the wrap. Wrap has 3 values.

wrap=
      "off"
      "virtual"
      "physical"

Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words.

Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are.

Off turns off word wrapping within the text area. One ongoing line.

<form>
      <textarea rows="5" cols="20" wrap="physical" name="comments">
      Enter Comments Here
      </textarea>
</form>

O/P:

Drop Down Lists

With the <select> and <option> tags drop down menues are created.
<select> is the list itself and each <option> is an available choice for the user.

<form>
      <select name="ourSites">
           <option>vyomworld.com</option>
           <option>testsworld.com</option>
           <option>jobsassist.com</option>
           <option>vyomlinks.com</option>
           <option>sourcecodesworld.com</option>
           <option>coolinterview.com</option>
           <option>tasty-food.com</option>
      </select>
</form>

O/P:

Selection List

Selection list is basically just another type of way to get input from the user.
The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.

<form>
      <select multiple name="ourSites" size="4">
           <option>vyomworld.com</option>
           <option>testsworld.com</option>
           <option>jobsassist.com</option>
           <option>vyomlinks.com</option>
           <option>sourcecodesworld.com</option>
           <option>coolinterview.com</option>
           <option>tasty-food.com</option>
      </select>
</form>

O/P:

Submit Button

The submit button will send all input form data to the destination declared in the form action command. If you do not give your submit button a value the button will display Submit Query by default. Placing any other text in the value will display within the button.

<form>
      First name:
      <input type="text" name="firstname">
      <br>
      Last name:
      <input type="text" name="lastname">
      <br>
      <input type="submit" value="Submit Here">
</form>

O/P: