HTML FORMS

HTML Forms

HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

HTML Forms – The Input Element

The most important form element is the input element.The input element is used to select user information.An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.

The most used input types are described below.


Text Fields:

Input Fields

<input type=”text”/> defines a one-line input field that a user can enter text into:

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

OUTPUT:

First name:
Last name:

Note:
The form itself is not visible. Also note that the default width of a text field is 20 characters.


Password Field

<input type=”password” name=”password”/> defines a password field:

<form>Password: <input type=”password” name=”password” /></form>

OUTPUT:
Password:

Note: The characters in a password field are masked (shown as asterisks or circles).


Radio Buttons

<input type=”radio” /> defines a radio button. Radio buttons let a user select ONLY ONE 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>

OUTPUT:

Male Female


Checkboxes

<input type=”checkbox” /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.

<form>
<input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike<br />
<input type=”checkbox” name=”vehicle” value=”Car” /> I have a car
</form>

OUTPUT:

I have a bike I have a car


Submit Button

<input type=”submit” /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:

<form name=”myForm” action=”html_form_action.php” method=”get”>
Username: <input type=”text” />
<input type=”submit” value=”Submit” />
</form>

OUTPUT:
Username:

If you type some characters in the text field above, and click the “Submit” button, the browser will send your input to a page called “html_form_action.php”. The page will show you the received input.


Reset buttons

The final type of input is the reset button. Setting the type to reset will place a button within your form to reset each field when clicked. Users enjoy having a “start over” button such as the reset button in case they begin filling out the wrong information in a major way.

<input type=”reset” value=”Reset Fields” />
<input type=”reset” value=”Start Over” />

OUTPUT:


Textareas

Textareas retrieve “blog” type information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area.

<textarea>Text Area!</textarea>

Default Textarea:

 

Textarea cols and rows

Adjusting the size of the appearance of the text area requires two attributes,cols and rows. Use a numeric value for each attribute and the larger the value the larger the field will appear.

<textarea cols=”20″ rows=”10″>Text Area!</textarea>
<textarea cols=”40″ rows=”2″>Text Area!</textarea>
<textarea cols=”45″ rows=”5″>Text Area!</textarea>

Bigger Text Areas:



A text area could take up an entire page if required.

Textarea wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

  • soft
  • hard
  • off

Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).

Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.

Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

<textarea cols=”20″ rows=”5″ wrap=”hard”>
As you can see many times word wrapping is often the desired
look for your textareas. Since it makes everything nice and
easy to read.
</textarea>

OUTPUT:

html – textarea readonly

Settting a yes or no value for the readonly attribute determines whether or not a viewer can manipulate the text inside the text field.

<textarea cols=”20″ rows=”5″ wrap=”hard” readonly=”yes”>
As you can see many times word wrapping is often the desired
look for your text areas. Since it makes everything nice and
easy to read.
</textarea>

OUTPUT:

Now you may not change the text inside the text area. However, you can still highlight or Ctrl-C and copy the texts.

Textarea disabled

As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting.

<textarea cols=”20″ rows=”5″ wrap=”hard” disabled=”yes”>
As you can see many times word wrapping is often the desired
look for your text areas. Since it makes everything nice and
easy to read. </textarea>

OUTPUT:


Upload forms

Use an upload form to allow users to upload pictures, movies, or even their own webpages. An upload form is another type of input form, simply set the type attribute to file.

<input type=”file” />

Upload Form:

max file size
To limit the size of the file being uploaded and saving you precious webserver space. We make use of a hidden input field and set a few specific attributes.

<input type=”hidden” name=”MAX_FILE_SIZE” value=”500″ />
< input type=”file”/>

Max File Size:

The value specified is the maximum allowable KB to be uploaded via this form. A value of 100 will allow a file up to 100kb.


Selection forms and drop down lists

Drop down lists are the basic selection forms. You have probably seen them already on the internet, maybe filling out a personal profile and selecting the state in which you live. Drop down lists have several options a user can select.

<select>
<option>California — CA</option>
<option>Colorado — CO</option>
<option>Connecticut — CN</option>
</select>

Drop Down List:

By default the first coded <option> will be displayed or selected as the default. We can change this using the selected attribute.

<select>
<option>California — CA</option>
<option>Colorado — CO</option>
<option selected=”yes”>Conneticut — CN</option>
</select>

Drop Down List:

Selection forms

We use the size attribute to break out from the single displayed drop down list.

<select size=”3″>
<option>California — CA</option>
<option>Colorado — CO</option>
<option>Connecticut — CN</option>
</select>

OUTPUT:

Selecting multiples

We can further add to our selection forms by adding the multiple attribute. This allows the user to select more than one entry from your selection forms. Obviously this attribute does not work with the single drop down lists.

<select multiple=”yes” size=”3″>
<option>California — CA</option>
<option>Colorado — CO</option>
<option>Connecticut — CN</option>
</select>

OUTPUT:

Now the user may select any or all states that apply to them.