HTML FORM
A form will
take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will
perform required processing on the passed data based on defined business logic
inside the application.
There are various form elements
available like text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
The HTML <form> tag
is used to create an HTML form and it has following syntax:
<form
action="Script URL" method="GET|POST">
form elements
like input, textarea etc.
</form>
HTML Form
Controls
There are different types of form controls
that you can use to collect data using HTML form:
v Text Input Controls
v Checkboxes Controls
v Radio Box Controls
v Select Box Controls
v File Select boxes
v Hidden Controls
v Clickable Buttons
v Submit and Reset Button
Text Input Controls
There are three types of text
input used on forms:
v Single-line text input controls - This
control is used for items that require only one line of user input, such as
search boxes or names. They are created using HTML <input> tag.
v Password input controls - This is also a
single-line text input but it masks the character as soon as a user enters it.
They are also created using HTMl <input> tag.
v Multi-line text input controls - This is
used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Single-line text input
controls
This control is used for items that require
only one line of user input, such as search boxes or names. They are created
using HTML <input> tag.
Example
Here is a basic example of a single-line text
input used to take first name and last name:
<!DOCTYPE
html>
<html>
<head>
<title>Text
Input Control</title>
</head>
<body>
<form >
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
</form>
</body>
</html>
Password Input controls
Example
<!DOCTYPE
html>
<html>
<head>
<title>Password
Input Control</title>
</head>
<body>
<form >
User ID :
<input type="text" name="user_id" />
<br>
Password:
<input type="password" name="password" />
</form>
</body>
</html>
Multiple-Line Text Input Controls (DESCRIPTION TYPE)
Example
<!DOCTYPE
html>
<html>
<head>
<title>Multiple-Line
Input Control</title>
</head>
<body>
<form>
Description:
<br />
<textarea
rows="5" cols="50" name="description">
Enter description
here...
</textarea>
</form>
</body>
</html>
Checkbox
Control
Example
<!DOCTYPE
html>
<html>
<head>
<title>Checkbox
Control</title>
</head>
<body>
<form>
<input
type="checkbox" name="maths" value="on"> Maths
<input
type="checkbox" name="physics" value="on">
Physics
</form>
</body>
</html>
Radio
Button Control
<!DOCTYPE
html>
<html>
<head>
<title>Radio
Box Control</title>
</head>
<body>
<form>
<input
type="radio" name="subject" value="maths">
Maths
<input
type="radio" name="subject" value="physics">
Physics
</form>
</body>
</html>
Select
Box Control(DROPDOWN TYPE)
Example
<!DOCTYPE
html>
<html>
<head>
<title>Select
Box Control</title>
</head>
<body>
<form>
<select
name="dropdown">
<option
value="Maths" selected>Maths</option>
<option
value="Physics">Physics</option>
</select>
</form>
</body>
</html>
File
Upload Box
Example
<!DOCTYPE
html>
<html>
<head>
<title>File
Upload Box</title>
</head>
<body>
<form>
<input
type="file" name="fileupload" accept="image/*"
/>
</form>
</body>
</html>
Button
Controls
Example
<!DOCTYPE
html>
<html>
<head>
<title>File
Upload Box</title>
</head>
<body>
<form>
<input
type="submit" name="submit" value="Submit" />
<input
type="reset" name="reset" value="Reset" />
<input
type="button" name="ok" value="OK" />
<input
type="image" name="imagebutton" src="/html/images/logo.png"
/>
</form>
</body>
</html>
No comments:
Post a Comment
Please do not enter any Link in the comment box.