Creating Forms

form tag

<form> tag is used to create forms in an html document.

Here's the syntax for defining simple form:

<form action="yourpagelink.htm" method="get/post">
....
rest of the code
....
</form>

Generally two attributes are used with form tag: action and method.

• action attribute

  action attributes specifies where to submit the form data.
  It contains the URL of the form processing agent.

• method attribute

  method attribute decides how the form data is to be submitted to the specified processing agent.
  There are two possible values that can be assigned to the method attribute:

  • get
    

    With get method, form data is appended to the specified URL and is visible.
    URL length is restricted and size of the form data is limited.
    get method is used when bookmarking is preferred./p>

  • post
    

    With post method, form data is added to the form body and is not visible.
    No restriction on URL length and no size limitation on form data.
    post method is used for sending sensitive data like passwords.

input tag

input tag is used inside form tag and is used to specify different form input control types like text field, password field, hidden text field, submit button, etc.

Syntax for using input tag is as follows:

<form action="url.html" method="post">
<input type="text" />
<input type="submit" />
</form>

• type attribute

  type attribute specifies the type of input control type.
  Possible values of type attribute are:

  Value	Description
  text	defines a textfield where user can enter a single line of text
  password	defines a password field
  hidden	defines a hidden textfield
  radio	defines a radio button that is used to select one option among many
  checkbox	defines a checkbox that is used to select multiple options
  file	defines a file upload box using which one can browse and upload files
  reset	defines a reset button which is used to clear all filled form information
  submit	defines a submit button
  button	defines a clickable button

Lets see the example of each input type.

Text Field

Text field allows you to input a single line of text. Here's how it looks like.

Text Field :

To get this, all you have to do is write this code inside form tags:

<input type="text" size="20" />

Here, size attribute is telling that the size of this text field will be of 20 characters. Start to type inside the text field and you will notice that only 20 characters are visible at a time.

Password Field

Password field is similar to text field except the text is hidden. Whatever you type will be shown as dots or bullets. Here's how it looks.

Password Field :

To get this result, all you have to do is write this code inside form tags:

<input type="password" size="20" />

Radio buttons

Radio buttons allows to select one option from many. These are dependent on each other.

Option 1
Option 2

To get this result, all you have to do is write this code inside form tags:

<input type="radio" value="option 1" name="select" /> Option 1
<br />
<input type="radio" value="option 2" name="select" /> Option 2
<br />

Pay attention on the attributes used inside the input field. name attribute should have same value for dependent radio buttons.

Check box

Check box allow to select many option at once. These are independent of each other.

Option 1
Option 2

To get this result, all you have to do is write this code inside form tags:

<input type="checkbox" value="option 1" name="select" />Option1
<br />
<input type="checkbox" value="option 2" name="select" />Option2
<br />

Pay attention on the attributes used inside the input field. name attribute should have same value for dependent checkbox.

select tag

select tag is used to create a drop down list box containing list of options.

option tag

option tag is used inside select tag to define different options.

Syntax for creating drop down menu is as follows:

<select>
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
</select>

textarea tag

textarea tag is used to create a multi-line text field with unlimited number of text.

Syntax for using textarea is as follows:

<textarea row="10" cols="50">
</textarea>

attributes used within textarea tag are rows and cols.

• rows

  rows attribute sets the height of the textarea by specifying number of visible lines of text.

• cols

  cols attribute sets the width of the textarea by specifying number of visible characters in a line of text.