Creating HTML Forms

HTML Forms are used to send data to a server. It may contain input elements like Text Fields, Check Boxes, Radio Buttons, Submit Buttons, or somekind. or even a select list like Textarea, Fieldset, Legend, and Label Elements. The most important form element is the input element that which the function is to select user information. It may be vary in many ways, depends on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, etc. Below i try to figure 'em out along with the examples to give you a deeper sight..

Text Field

Text Field is a one-line input field that we can enter text into. By default, the width of a text field is set to 20 characters, and that this is the standard form.. Here is an example:

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

It will generate a text field similar to the below.

Password Field

The characters in a password field are masked or are shown as asterisks or circles. It's just like a column when you type in your facebook password on the field. Here is an example:

<form>
Password: <input type="password" name="pwd"/>
</form>

To be the lesser the above code will generate a form similar to the below.

Radio Buttons

It's generally used to ask a user to select only one of some options provided by ticking on a radio. It has a shape like a ball (very small) but markable. Here is an example.

<form>
<input type="radio" name="sex" value="male"/>Male<br/>
<input type="radio" name="sex" value="female"/>Female
</form>

To be the lesser the code above will generate a form similar to the below.

Checkboxes

It's alike to Radio Button but here the user can select not only one of choices available, and the shape is just like you might guess, it's a checkbox. Here is an example.

<form>
<input type="checkbox" name="someone" value="Female"/>My friend is female<br/>
<input type="checkbox" name="someone" value="Male"/>My friend is male
</form>

To be the lesser the code above will generate a form similar to the below.

Submit Button

A submit button is used to send data to a server. The data is sent to a page as specified in the form's action attribute. The file defined in the action attribute usually does something with the received input. On the example below, if a user types some characters in the text field and then click "Submit", the browser will send the data to a page as specified in the property "action" (action="Url of server").

<form name="input" action="Url of server that will receive the data" method="get">
Username: <input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>

To be the lesser the code above will generate a form similar to the below.

drop-down List

There are two styles that you can create, Simple Drop Down and Drop Down with a pre-selected value. I don't know how to explain you about the shape or any else thing about this one, but i'm sure you'll know it all yourself by checking the examples below.

*Simple Drop Down List

<!DOCTYPE html>
<html>
<body>

<form>
<select name="cars">
<option value="fiat">Fiat</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
</select>
</form>

</body>
</html>

It results in the below form.

*Drop-down List With A Pre-selected Value

<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="fiat">Fiat</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
<option value="volvo" selected="selected">Volvo</option>
</select>
</form>

</body>
</html>

It results in the below form.

Textarea

In a text-area the user can write an unlimited characters. Here is an example.

<!DOCTYPE html>
<html>
<body>
<textarea rows="8" cols="45">
Example Textarea - In a text-area the user can write an unlimited characters.
</textarea>
</body>
</html>

To be the lesser the code above will generate a form similar to the below.

Send e-mail Form

There is also a form whose function to send email. But maybe not every browser support it. Here is an example.

<!DOCTYPE html>
<html>
<body>

<form action="MAILTO:jsmith11325@facebook.com" method="post" enctype="text/plain">
Name:<br/>
<input type="text" name="name" value="your name"/><br/>
E-mail:<br/>
<input type="text" name="mail" value="your email"/><br/>
Message:<br/>
<input type="text" name="message" value="your message" size="50"/>
<br/><br/>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

To be the lesser the code above will generate a form similar to the following.

You can also combine one form with another one. Here are some examples.

*Form with text fields and a submit button.

<!DOCTYPE html>
<html>
<body>

<form name="input" action="Your url goes here" method="get">
First name: <input type="text" name="FirstName" value="John"/><br/>
Last name: <input type="text" name="LastName" value="Smith"/><br/>
<input type="submit" value="Submit"/>
</form>

</body>
</html>

It results in the following form.

If you click the "Submit" button, the data will be sent to a page as you specified in the "action" property (action="Your url goes here").

*Form with checkboxes and a submit button.

<!DOCTYPE html>
<html>
<body>

<form name="input" action="Your url goes here" method="get">
<input type="checkbox" name="vehicle" value="Car"/>I have a car<br/>
<input type="checkbox" name="vehicle" value="Plan"/>I have a plan<br/><br/>
<input type="submit" value="Submit"/>
</form>

</body>
</html>

It results in the following form.

If you click the "Submit" button, the data will be sent to a page as you specified in the "action" property (action="Your url goes here").

*Form with radio buttons and a submit.

<!DOCTYPE html>
<html>
<body>

<form name="input" action="Your url goes here" method="get">
<input type="radio" name="sex" value="male"/> Male<br/>
<input type="radio" name="sex" value="female"/> Female<br/>
<input type="submit" value="Submit"/>
</form>

</body>
</html>

It results in the following form.

If you click the "Submit" button, the data will be sent to a page as you specified in the "action" property (action="Your url goes here").

If you want, you can also style a form with a border by adding the fieldset tag into the code, and adding a caption for the fieldset element. Here is an example.

<!DOCTYPE html>
<html>
<body>

<form action="">
<fieldset>
<legend>Your information:</legend>
Name: <input type="text" size="25"/><br/>
E-mail: <input type="text" size="25"/><br/>
Birthday: <input type="text" size="10"/>
</fieldset>
</form>

</body>
</html>

It results in the following form.

Creating HTML Forms

0 comments:

Post a Comment