Posted by: tonyteaching | February 18, 2009

HTML: to create Form

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag.

<form>
  <input>
  <input>
</form>

Type of Input

1. Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

The attributes of the text field include:

  • type – Determines what kind of input field it will be. Possible choices are text, submit, and password.
  • name – Assigns a name to the given field so that you may reference it later.
  • size – Sets the horizontal width of the field. The unit of measurement is in blank spaces.
  • maxlength – Dictates the maximum number of characters that can be entered.
<form>

name:
<input type="text" name="name" size="30" maxlength="30">
 <br>
Password:
<input type="password" name="password" size="10" maxlength="10">
</form>

Note:

– the form itself is not visible.

– the width of the text field is 20 characters by default.

– Do not use the password feature for security purposes. The data in the password field is not encrypted and is not secure in any way.

2.Radio Buttons

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

<form>

Sex:
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female

</form>

3.Checkbox

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

If <b>YES, Which kinds of service</b> have you used? (<i>You can choose more than one</i>) <br>

	&nbsp; &nbsp; <input type="checkbox" name="listen" value="1">Sending SMS about opinions, complains, or reports to government official/institution.<br>
	&nbsp; &nbsp; <input type="checkbox" name="notification" value="1">Receiving SMS notifications, such as messages about disaster warnings, bills, or news update. <br>
	&nbsp; &nbsp; <input type="checkbox" name="pullbasedinformation" value="1">Sending SMS in order to get some information, such as sending SMS to get information about bus timetables or weather.<br>
	&nbsp; &nbsp; <input type="checkbox" name="transaction" value="1">Doing transactions via SMS, such as paying bills using SMS.<br>

4. Drop-down box

We use drop-down box when we want to provide a list of answer options.

<form>

Nationality:
<select name="nationality">
<option value="Indonesia"> Indonesia </option>
<option value="Australia"> Australia </option>

5.Text Area

Text areas serve as an input field for viewers to place their own comments onto. For this form, the text area is used as a way to write comments to somebody.

the tag is <textarea> Text inside the text area </textarea>

The attributes for textarea includes:

rows=”..”

column=”..”

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. i.e. The example below shows a text area 5 rows tall and 20 characters wide.

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 of course, 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>

6.Selection Form

Yet another type of form, a highlighted selection list. This form will post what the user highlights. 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 >
Your Nationality:
<select multiple name="nationality" size="3">
<option value="Indonesia" selected>Indonesia</option>
<option value="Australia" >Australia</option>
<option value="Malaysia" >Malaysia</option>
<option value="Singapore" >Singapore</option>
</select>
</form>

7.Submit Button

Generally, the button should be the last item of your form and have its name attribute set to “Send” or “Submit”. Name defines what the label of the button will be.

When the user clicks on the “Submit” button, the content of the form is sent to the server.

If we want to create a submit button on our form, we need to define action and method attributes.

  • method – We will only be using the post functionality of method, which sends the data without displaying any of the information to the visitor. The options can be ‘post‘ or ‘get‘. The HTML specifications technically define the difference between "GET" and "POST" so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a message body. But the specifications also give the usage recommendation that the "GET" method should be used when the form processing is “idempotent”, and in those cases only. As a simplification, we might say that "GET" is basically for just getting (retrieving) data whereas "POST" may involve anything, like storing or updating data, or ordering a product, or sending E-mail.
  • action – Specifies the URL to send the data to or what file’s name which will process the input data (e.g. in this case ‘insert.php’)
<form action="insert.php" method="post">

<input type="submit" value="Submit">

</form>

Or we can send the input data to our email:

<form method="post" action="mailto:susa0004@flinders.edu.au">
Name:
<input type="text" size="10" maxlength="40" name="name"> <br>
Comment:
<input type="text" size="10" maxlength="40" name="name"> <br>

<br>
<input type="submit" value="Send">
</form>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: