Quick Reach
Input type
HTML form has different elements. The most important is input type element. The <input> element defines what kind of input user can enter. For example:
- type = text specifies a user can enter text information (alphabets, numbers etc.).
- type = checkbox specifies a user can select from given check box values.
- type = radio defines a user can select one of a few given values from radio button.
- text area allows users to enter multiline text information.
- type = submit, is a button that will submit form data to form action page to be processes.
- type = password will give a text box to enter passwords, where entered characters are not shown.
Input type text example
The example below shows a form with three text boxes. Name, email and address.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” id=“name”> <br />
Email:<input type=“text” id=“email”> <br />
Address:<input type=“text” id=“address”/><br />
<input type=“submit”>
</form>
</body>
</html>
|
Input type text example with CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
<style>
.txtbox{
font-size:17px;
color:red;
border: 2px solid green;
}
</style>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” id=“name” class=“txtbox”> <br />
Email:<input type=“text” id=“email” style=“font-size:12px;color:yellow;border:2px solid orange”> <br />
Address:<input type=“text” id=“address”/><br />
<input type=“submit”>
</form>
</body>
</html>
|
Input button example with onclick event
The example below shows creating an input button “Show message”. As you click on this button, the click event will trigger show javascript function that will show an alert.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
<script>
function show()
{
alert(“Button is clicked!”);
}
</script>
</head>
<body>
<form action=“” method=“post”>
<input type=“button” value=“Show Message” onclick=“show()”>
</form>
</body>
</html>
|
Input submit example
Input type=”submit” is button type that submits form information to server. The example below shows how to use button as type submit in input element.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“submit”>
</form>
</body>
</html>
|
As you click on “Save info” button it will post data to form action =””. This is generally a scripting language page that processes submitted information and performs some action.
Input submit with CSS Example
You may also apply CSS to submit button. See example below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
<style>
.submitstyle{
font-size:16px;
color:red;
border: 1px solid green;
}
</style>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“submit” value=“Save Info”>
</form>
</body>
</html>
|
Input type textarea
Input type textarea shows multiple line text box. For example allowing user to write message with contact us form. See example below of using input textarea.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” id=“name”> <br />
Email:<input type=“text” id=“email”> <br />
Address:<input type=“text” id=“address”/><br />
Message: <br /><textarea id=“message” rows=“15” cols=“40”></textarea><br />
<input type=“submit”>
</form>
</body>
</html>
|
Input hidden Example
The example below shows how you can use hidden field in html form.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” id=“name”> <br />
Email:<input type=“text” id=“email”> <br />
<input type=“hidden” name=“totalprice” value=“$20”>
<input type=“submit”>
</form>
</body>
</html>
|
Input image example
The input type image allows you to use an image and act as submit button. See example below to have an idea how to use image as input to use it in place of submit button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text”> <br />
Email:<input type=“text”> <br />
<input type=“image” src=“submitimg.jpg”>
</form>
</body>
</html>
|
Also see HTML table | HTML div | HTML links
Leave A Comment?