HTML/CSS/Text/textfield — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 08:17, 26 мая 2010
Содержание
A prepopulated text field with a maximum length
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>A prepopulated text field with a maximum length</title>
</head>
<body>
<form method="post" action="">
<p><label for="zip">Change your ZIP code <em>(maximum 5 characters)</em></label>
<input type="text" id="zip" name="zip" size="5" maxlength="5" value="94710" /></p>
</form>
</body>
</html>
input type = "text" inserts a text box
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form method = "post" action = "/cgi-bin/formmail">
<p><label>Name:<input name = "name" type = "text" size = "25" maxlength = "30" />
</label></p>
<p>
<input type = "submit" value = "Submit Your Entries" />
<input type = "reset" value = "Clear Your Entries" />
</p>
</form>
</body>
</html>
Set text field background
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
html,body {
height: 100%
}
#wrapper {
height: 100%;
width: 100%;
display: table;
vertical-align: middle;
}
#outer {
display: table-cell;
vertical-align: middle;
}
#formwrap {
position: relative;
left: 50%;
float: left;
}
#form1 {
border: 1px solid #000;
padding: 20px 20px;
position: relative;
text-align: right;
left: -50%;
}
p {
margin: 1em 0
}
input {
position: relative;
background: #ffffcc
}
</style>
</head>
<body>
<div id="wrapper">
<div id="outer">
<div id="formwrap">
<form id="form1" method="post" action="">
<p>
<label for="t1">Name: </label>
<input type="text" name="t1" id="t1" value="I"m in the middle" />
</p>
<p>
<label for="t2">Password: </label>
<input type="password" name="t2" id="t2" />
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Single line text input control
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Single line text input control</title>
</head>
<body>
<form action="" method="get" name="frmSearch">
Search:
<input type="text" name="txtSearch" value="Search for" size="20" maxlength="64" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Text field border style
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Register for E-mail</title>
<style rel="stylesheet" type="text/css">
body {
color: #000000;
background-color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 12pt;
}
fieldset {
font-size: 12px;
padding: 10px;
width: 250px;
}
.formPrompt {
text-align: right;
}
input {
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<form name="frmExample" action="" method="post">
<fieldset>
<legend>Register for our e-mail</legend>
<table>
<tr>
<td class="formPrompt">First name: </td>
<td><input type="text" name="txtFirstName" size="12" /></td>
</tr>
<tr>
<td class="formPrompt">Last name: </td>
<td><input type="text" name="txtLastName" size="12" /></td>
</tr>
<tr>
<td class="formPrompt">E-mail address: </td>
<td><input type="text" name="txtEmail" size="12" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Register" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Text input sizes
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Text input sizes</title>
</head>
<body>
<form name="frmExample" action="" method="post">
Enter your date of birth (MM DD YYYY):
<input type="text" size="2" name="txtMonth" />
<input type="text" size="2" name="txtDay" />
<input type="text" size="4" name="txtYear" />
</form>
</body>
</html>