HTML/CSS/Text/textfield

Материал из Web эксперт
Перейти к: навигация, поиск

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%

}

  1. wrapper {
 height: 100%;
 width: 100%;
 display: table;
 vertical-align: middle;

}

  1. outer {
 display: table-cell;
 vertical-align: middle;

}

  1. formwrap {
 position: relative;
 left: 50%;
 float: left;

}

  1. 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>