In This Tutorial
Input type text
The input type = “text” specifies a textbox field. By default the width of textbox field is 20 characters. This is where you can ask visitors to enter information like name, email, address etc.
An input textbox 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>
|
CSS input text
You can apply CSS to text fields. In order to specify CSS to input textbox you can use a class created in CSS or also can use style attribute inside <input type=text>. The example below uses same form as above. The first textbox is given CSS created in <head> section. While other textbox uses CSS at inline level by using style attribute. Both text boxes are given border with green and orange colors, the entered text is also different for both boxes.
|
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>
|
Also see HTML form | HTML table | HTML div | HTML links
Leave A Comment?