HTML - Forms

  »   HTML  »   HTML Tutorial - Creating Forms in HTML

Forms are one of the most important tools used by a webmaster to gather important information about an internet user, information such as e-mail, name, address, phone, or any other kind of info.

Based on the necessity the information can even be stored on a file, you can make statistics, register forms or subscriptions to the information presented on your web page, and many others.

HTML - Text fields

Before getting into detail, we have to expose a little a form's basics. Text fields have got a few attributes that have to be mentioned since the beginning:

  • type - establishes the text field's type. For example: text, sending, or password.
  • name - gives the field a name for further reference at a later date.
  • size - sets the size of the field.
  • maxlenght - the maximum value of characters that can be typed.
html<form method="post" action="">
	Name: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" />



DO NOT use this code. Data from the form will not be encrypted and will not be safe in terms of security.

HTML - Email forms

Let's add the send button now, shall we? Generally, the send button should be the last and to have the attribute named as 'Send', 'Submit', or something around that.

We also need to specify a destination of the data entered in the form, as well as the transfer mode. This can be done by adding the following form attributes:

  • method - We will use the "post" method. This sends the form with the information inserted without displaying the user's details.
  • action - This will be used to specify the URL where the information will be sent.
html<form method="post" action="">.

	Name: <input type="text" size="10" maxlength="40" name="name" /><br />
	Password: <input type="password" size="10" maxlength="10" name="password" /><br />
	<input type="submit" value="Send" />


. Name:

Just change the e-mail address to a real one for it to work!

HTML - Radio Buttons

The radio buttons are very popular, useful, and easy to use. The most used example would be a question with more than one answer choice. The must be known attributes are the following:

  • value - specifies what will be sent in the case in which a user selects a certain button. Only a single value will be sent.
  • name - decides which button set does the selected button belong to.
html<form method="post" action="">
	<p>What type of shoes you wear ?</p>
	<label>Color:</label> <br />
	<input type="radio" name="color" value="dark" /> Dark <br />
	<input type="radio" name="color" value="light" /> Light <br />
	<label>Size:</label> <br />
	<input type="radio" name="size" value="small" /> Small <br />
	<input type="radio" name="size" value="average" /> Average <br />
	<input type="radio" name="size" value="big" /> Big <br />
	<input type="submit" value="Email Myself" />


What type of shoes you wear ?



In the case in which you will replace the email address with yours you will receive an email with: 'size=(choose) color=(choose)'.

HTML - Checkbox

Using checkboxes the user has got the possibility of choosing one, two, or more answer variants. The name and value attributes are used the same as for the radio buttons.

html<form method="post" action="">
	<p>What color shoes you prefer?</p>

	<input type="checkbox" name="shoes" value="black" /> Simple Black <br/>
	<input type="checkbox" name="shoes" value="white" /> Simple White <br/>
	<input type="checkbox" name="shoes" value="gray" /> Shades of gray <br/>
	<input type="checkbox" name="shoes" value="black&white" /> Black and white<br/>
	<input type="submit" value="Email Myself" />


What color shoes you prefer?

Simple Black
Simple White
Shades of gray
Black and white

HTML - Another types of list forms

Another model of list form is the following, in which the user selects a certain line that will be sent as the chosen option.

html<form method="post" action="">
	<p>Musical preferences</p>
	<select multiple name="music" size="4">
		<option value="emo" selected>Emo</option> 
		<option value="metal/rock" >Metal/Rock</option> 
		<option value="hiphop" >Hip Hop</option> 
		<option value="ska" >Ska</option> 
		<option value="jazz" >Jazz</option> 
		<option value="country" >Country</option> 
		<option value="classical" >Classical</option> 
		<option value="alternative" >Alternative</option> 
		<option value="oldies" >Oldies</option> 
		<option value="techno" >Techno</option> 
	</select><br />
	<input type="submit" value="Email Yourself" />


Musical preferences

Another form model is the 'drop-down' menu. This will be displayed as a field, which will then show a list when a click is made on it.

html<form method="post" action="">
	<p>Level of education?</p>
	<select name="education">
		<option>High school </option> 
	</select><br />
	<input type="submit" value="Email Yourself" />


Level of education?

HTML - Upload form

First of all it must be mentioned that this form is only the interface, the visible part with which the user will be able to work. To make a complete upload form PHP and PERL knowledge and skills, not to mention javascript.

An upload form is composed of many parts. We will start by establishing the size of the file that we will upload. This thing is done using a hidden field. After that, we will create the field in which the user will be able to write the address of the file or will be able to browse for it in an 'explore' window.

html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />


HTML - Text zones, comments

Generally, text zones are used to send comments. Blogs and forums are the main web pages that are using this kind of option. Nevertheless, many sites are using these text zones to find out their user's opinion on a certain matter.

To create a text zone we will first specify the rows and cols attributes within the <textarea> tag. 'Rows' will establish the height of the field, and 'cols' its length, in means of characters. In the following example, there are 5 lines of 20 characters each. Also, we must specify the attributes of the warp tag, those being:

  • wrap=
    1. "off"
    2. "virtual"
    3. "physical"
html<form method="post" action="">

	<textarea rows="5" cols="20" wrap="physical" name="comments">Write a comment</textarea><br />
	<input type="submit" value="Email Yourself" />


Also, it must be mentioned that everything you will write will be shown within the text zone.