HTML/CSS/Text/textfield — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:21, 26 мая 2010
Содержание
A prepopulated text field with a maximum length
<source lang="html4strict">
<!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="">
<label for="zip">Change your ZIP code (maximum 5 characters)</label> <input type="text" id="zip" name="zip" size="5" maxlength="5" value="94710" />
</form>
</body> </html>
</source>
input type = "text" inserts a text box
<source lang="html4strict">
<?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">
<label>Name:<input name = "name" type = "text" size = "25" maxlength = "30" /> </label>
<input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" />
</form> </body>
</html>
</source>
Set text field background
<source lang="html4strict">
<!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>
<form id="form1" method="post" action="">
<label for="t1">Name: </label> <input type="text" name="t1" id="t1" value="I"m in the middle" />
<label for="t2">Password: </label> <input type="password" name="t2" id="t2" />
</form>
</body> </html>
</source>
Single line text input control
<source lang="html4strict">
<?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>
</source>
Text field border style
<source lang="html4strict">
<?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>
First name: | <input type="text" name="txtFirstName" size="12" /> |
Last name: | <input type="text" name="txtLastName" size="12" /> |
E-mail address: | <input type="text" name="txtEmail" size="12" /> |
<input type="submit" value="Register" /> |
</fieldset> </form> </body> </html>
</source>
Text input sizes
<source lang="html4strict">
<?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>
</source>