Saturday, 30 November 2013

HTML » Forms

HTML Forms

HTML forms are used to pass data to a server.
We will show You what can contain HTML Forms in the below examples.

SYNTAX

<form>
.
content
.
</form>

The input element
The input element is the most important element.
The <input> element is used to select user information.
Let us show You.




Text Fields

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


» EXAMPLE:


<html>
<body>

<form>
Username:<input type="text" name="username" /><br />
Password:<input type="text" name="password" />
</form>

</body>
</html>

» Result:
Username:
Password:

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





Creating password form

In the below example we will use input method.

» EXAMPLE:

<html>
<body>

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

</body>
</html>


» Result:

Password: 




Radio Button
<input type="radio"> defines a radio button. 
Radio buttons let a user select ONLY ONE of a limited number of choices.

» EXAMPLE:


<html>
<body>

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

</body>
</html>

» Result:


Female
Male



Checkboxes

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

» EXAMPLE:


<html>
<body>

<form>
<input type="checkbox" name="fruit" value="apple" />Apple<br />
<input type="checkbox" name="fruit" value="banana" />Banana
</form>

</body>
</html>

» Result:


Apple
Banana


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.


» EXAMPLE:


<html>
<body>

<form action="page.html" method="get" name="input">
Username:<input type="text" name="username" /><br />
<input type="submit" name="fruit" value="Submit" />
</form>

</body>
</html>

» Result:
Username:


Adding textarea
In the following example You will see how yo use textarea.
You have to specify rows and cols.


» EXAMPLE:


<html>

<body>

<textarea rows="9" cols="40">

</textarea>

</body>

</html>


» Result: