HTML/CSS/Text/textarea

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

Multi line text input control

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>Multi line text input control</title>
</head>
<body>
<form action="http://www.example.org/feedback.asp" method="post">
 Please tell us what you think of the site and then click submit:<br />
  <textarea name="txtFeedback" rows="20" cols="50">
Enter your feedback here.
  </textarea>
 <br />
 <input type="submit" value="Submit" />
</form>
</body>
</html>



Set background color for textarea

 
<!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>
<title></title>
<style type="text/css">
textarea {
 width: 300px;
 height: 100px;
 background-color: yellow;
 font-size: 1em;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 border: 1px solid black;
}
</style>
</head>
<body>
  <p>
    <TEXTAREA name="thetext" rows="20" cols="80">Notes.</TEXTAREA>
   </p>
   <input name="reset" type="reset" id="reset" value="Reset" />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
  
</body>
</html>



Set border for a textarea to "1px solid black"

 
<!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>
<title></title>
<style type="text/css">
textarea {
 width: 300px;
 height: 100px;
 background-color: yellow;
 font-size: 1em;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 border: 1px solid black;
}
</style>
</head>
<body>
  <p>
    <TEXTAREA name="thetext" rows="20" cols="80">Notes.</TEXTAREA>
   </p>
   <input name="reset" type="reset" id="reset" value="Reset" />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
  
</body>
</html>



set font size, weight, family for textarea

 
<!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>
<title></title>
<style type="text/css">
textarea {
 width: 300px;
 height: 100px;
 background-color: yellow;
 font-size: 1em;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 border: 1px solid black;
}
</style>
</head>
<body>
  <p>
    <TEXTAREA name="thetext" rows="20" cols="80">Notes.</TEXTAREA>
   </p>
   <input name="reset" type="reset" id="reset" value="Reset" />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
  
</body>
</html>



Set required textarea field to have solid border and highlight color

 
<!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>
<title></title>
<style type="text/css">
textarea.required, input.required  {
 border: 1px solid red;
 background-color: #eee;
}

</style>
</head>
<body>
   <form id="msgform" name="msgform" method="post" action="/process.php">
s   <fieldset>
    <legend>Your Message</legend>
    <label for="fmstate" accesskey="y">Subject</label>
    <input type="text" name="fmcountry" id="fmcountry" />
    <label for="fmmsg" class="required"><span class="akey">M</span>essage 
  <img src="alert.gif" /> Required</label>
    <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14" class="required"></textarea>
   </fieldset>
   <input type="submit" name="submit" value="send" class="submit" />
  </form>
</body>
</html>



Set width and height for textarea

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

textarea {
  width: 250px;
  height: 75px;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="form1" name="form1" method="post" action="/">
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
</div>
</body>
</html>



textarea creates a multiline textbox

 
<?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">
   <body>
      <form method = "post" action = "/cgi-bin/formmail">
          
         <p><label>Comments:<br />
            <textarea name = "comments" rows = "4" cols = "36">
               Enter your comments here.
            </textarea>
         </label></p>
      </form>
   </body>
</html>



textarea:focus

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
textarea {
  width: 300px;
  height: 100px;
  background-color: yellow;
  font-size: 1em;
  font-weight: bold;
  font-family: Verdana;
  border: 1px solid black;
}
textarea:focus {
  background-color: green;
}

</style>
</head>
<body>

<form action="" method="post" name="myform">
  <table cellspacing="0">
  <tr>
    <td><textarea name="notes" cols="35" rows="3"></textarea></td>
  </tr>
</table>

  </form>
</body>
</html>



The textarea element

 
<!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>The textarea element</title>
</head>
<body>
  <form method="post" action="/cgi-bin/formhandler.cgi">
    <textarea name="message" rows="6" cols="50">
        Dearest your name,
        
        Message.
    </textarea>
  </form>
</body>
</html>



White space is preserved in a text area

 
<!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>The textarea element</title>
</head>
<body>
  <form method="post" action="/cgi-bin/formhandler.cgi">
        <textarea name="message" rows="6" cols="50">
            Dearest your name,
            
            Message.
        </textarea>
  </form>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Text/textarea&oldid=5883»