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.
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:
html<form method="post" action="mailto:youremail@email.com">
Name: <input type="text" size="10" maxlength="40" name="name" /><br />
Password: <input type="password" size="10" maxlength="10" name="password" />
</form>DO NOT use this code. Data from the form will not be encrypted and will not be safe in terms of security.
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:
html<form method="post" action="mailto:youremail@email.com">.
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" />
</form>Just change the e-mail address to a real one for it to work!
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:
html<form method="post" action="mailto:youremail@email.com">
<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" />
</form>In the case in which you will replace the email address with yours you will receive an email with: 'size=(choose) color=(choose)'.
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="mailto:youremail@email.com">
<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" />
</form>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="mailto:youremail@email.com">
<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" />
</form>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="mailto:youremail@email.com">
<p>Level of education?</p>
<select name="education">
<option>Choose</option>
<option>High school </option>
<option>Collage</option>
<option>Doctorate</option>
</select><br />
<input type="submit" value="Email Yourself" />
</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" />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:
html<form method="post" action="mailto:youremail@email.com">
<textarea rows="5" cols="20" wrap="physical" name="comments">Write a comment</textarea><br />
<input type="submit" value="Email Yourself" />
</form>Also, it must be mentioned that everything you will write will be shown within the text zone.