HTML/CSS/Form Style/Button — различия между версиями

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

Версия 09:21, 26 мая 2010

Buttons using the button element

 
<?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>Buttons using the &lt;button&gt; element</title>
</head>
<body>
<form action="" method="post">
<button type="submit">Submit</button>
<br /><br />
<button type="reset"><b>Clear this form</b> I want to start again</button>
<br /><br />
<button type="button"><img src="submit.gif" alt="submit" /></button>
</form>
</body>
</html>



Change form button style

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
.button {
  padding: 4px;
  font-size: 1.5em;
}
.buttonReset {
  color: #fcc;
  background-color: #900;
  border: 1px solid #660;
}
.buttonResetRoll {
  color: white;
  background-color: #c00;
  border: 1px solid #660;
}
.buttonSubmit {
  color: white;
  background-color: #660;
  border: 1px solid #660;
}
.buttonSubmitRoll {
  color: white;
  background-color: #cc0;
  border: 1px solid #660;
}

  </style>
  <script language="JavaScript" type="text/javascript">
function classChange(styleChange,item) {
    item.className = styleChange;
}
  </script>
</head>
<body>
<form action="" method="post">
  <label for="question">Question?</label>
  <input type="text"
         name="question"
         id="textfield"
         value="Type answer here" /><br />
  <input name="reset"
         type="reset"
         id="reset"
         value="Reset"
         class="button buttonReset"
         onMouseOver="classChange("buttonResetRoll",this)"
         onMouseOut="classChange("buttonReset",this)" />
  <input type="submit"
         name="Submit"
         value="Submit"
         class="button buttonSubmit"
         onMouseOver="classChange("buttonSubmitRoll",this)"
         onMouseOut="classChange("buttonSubmit",this)" />

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



Define class for input button control

 
<!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">

.save {
 margin-top: 1em;
 width: 5em;
}

</style>
</head>
<body>
    <form method="get" name="copresentations">
   <table cellspacing="0">
    <caption>
     Summary of Financial Data
    </caption>
    <tr>
     <th scope="col">Fiscal Year </th>
     <th scope="col">Worksite<br />
      Presentations </th>
     <th scope="col">Passing Grades </th>
     <th scope="col">Number of Presentators </th>
    </tr>
    <tr>
     <th scope="row">2003</th>
     <td><input type="text" name="w2003" /></td>
     <td><input type="text" name="p2003" /></td>
     <td><input type="text" name="n2003" /></td>
    </tr>
    <tr>
     <th scope="row">2004</th>
     <td><input type="text" name="w2004" /></td>
     <td><input type="text" name="p2004" /></td>
     <td><input type="text" name="n2004" /></td>
    </tr>
   </table>
   <input type="submit" class="save" value="Save" />
  </form>
</body>
</html>



Hide submit button

 
<!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">
.buttonSubmitHide {
 display: none;
}
</style>
<script language="JavaScript" type="text/javascript">
function classChange(styleChange,item) {
 item.className = styleChange;
}
</script>
</head>
<body>
  <h2>Order Confirmation</h2>
  <form action="login.php" method="post" onsubmit="classChange("buttonSubmitHide",submit);   return true;">
   <div align="center">
    <p>Are you sure?</p>
    <label for="uname">Final Price:</label>
    <input type="text" name="uname" id="uname" value="$7.95" />
    <input type="submit" name="submit" value="submit" class="buttonSubmit" />
   </div>
  </form>
</body>
</html>



input types "submit" and "reset" insert buttons for submitting and clearing the form"s contents

 
<?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 = "">
         <p>
            <input type = "submit" value = "Submit Your Entries" />
            <input type = "reset" value = "Clear Your Entries" />
         </p>   
      </form>
   </body>
</html>



Set margin and width for submit button

 
<!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">

.buttonSubmit {
 width: 75px;
 margin-left: 95px;
}

</style>
</head>
<body>
   <form action="" method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pname">Password</label>
   <input type="text" name="pname" id="pname" value="" /><br />
   <label for="recall">Remember you?</label> 
   <input type="checkbox" name="recall" id="recall"  class="checkbox" /><br />
   <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Set style for submit button: border, background color, padding, margin and width

 
<!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">

.submit {
  border: none;
  background-color: #fff;
  padding: 0;
  margin: 0;
  width: 5em;
}

</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>
    
    <p>This is a test.</p>
    
      <p>Please fill out our form below in order to contact me. </p>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <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 &raquo;" class="submit" />
      </form>
      
     <p>Note: Due to our busy schedules, we cannot answer every message.</p>
    
    </div>
  </div>
  <div id="extra">
    <h2>header</h2>
    <p>This is a text</p>
  </div>
  <div id="footer">
    <p>All rights reserved except where noted.</p>
  </div>
</div>
</body>
</html>



Set style for submit hover: text decoration

 
<!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">
.submit:hover {
  text-decoration: underline;
}
</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>
    
    <p>This is a test.</p>
    
      <p>Please fill out our form below in order to contact me. </p>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <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 &raquo;" class="submit" />
      </form>
      
     <p>Note: Due to our busy schedules, we cannot answer every message.</p>
    
    </div>
  </div>
  <div id="extra">
    <h2>header</h2>
    <p>This is a text</p>
  </div>
  <div id="footer">
    <p>All rights reserved except where noted.</p>
  </div>
</div>
</body>
</html>



Set submit button style for input

 

<!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">

input.submit {
  width: 5em;
}


</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="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <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 id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>



Set text-transform: uppercase for button

 
<!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">
.buttonSubmit {
 width: 75px;
 margin-left: 75px;
 color: green;
 text-transform: uppercase;
 border: 1px solid green;
}
</style>
</head>
<body>
    <form method="post">
   <label for="uname">Username</label>
   <input type="text" name="uname" id="uname" value="" /><br />
   <label for="pword">Password</label>
   <input type="text" name="pword" id="pword" value="" /> <br /> 
     <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
  </form>
</body>
</html>



Style for button submit

 
<!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">
.buttonSubmit {
 color: white;
 background-color: #660;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;
}
</style>
</head>
 <label for="question">Who is president of the U.S.?
</label>
 <input type="text" name="question" id="textfield" value="Type answer here" /><br /> 
 <input name="reset" type="reset"  value="Reset" class="buttonReset" />
 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
</form>
</html>



Style for reset button

 
<!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">
.buttonReset {
 color: #fcc;
 background-color: #900;
 font-size: 1.5em;
 border: 1px solid #660;
 padding: 4px;        
}
</style>
</head>
 <label for="question">Who is president of the U.S.?
</label>
 <input type="text" name="question" id="textfield" value="Type answer here" /><br /> 
 <input name="reset" type="reset"  value="Reset" class="buttonReset" />
 <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
</form>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/Button&oldid=5590»