HTML/CSS/Form Style/Button

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

Buttons using the button element

   <source lang="html4strict">

<?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 <button> element</title>

</head> <body> <form action="" method="post"> <button type="submit">Submit</button>

<button type="reset">Clear this form I want to start again</button>

<button type="button"><img src="submit.gif" alt="submit" /></button> </form> </body> </html> 

</source>


Change form button style

   <source lang="html4strict">

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

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

</source>


Define class for input button control

   <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> <title></title> <style type="text/css">

.save { 

margin-top: 1em;
width: 5em;

}

</style> </head> <body> 

   <form method="get" name="copresentations">
Summary of Financial Data
Fiscal Year Worksite
Presentations 		Passing Grades Number of Presentators
2003 <input type="text" name="w2003" /> <input type="text" name="p2003" /> <input type="text" name="n2003" />
2004 <input type="text" name="w2004" /> <input type="text" name="p2004" /> <input type="text" name="n2004" /> 
  <input type="submit" class="save" value="Save" />
 </form>

</body> </html> 

</source>


Hide submit button

   <source lang="html4strict">

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

Order Confirmation

 <form action="login.php" method="post" onsubmit="classChange("buttonSubmitHide",submit);   return true;">

Are you sure?

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

 </form>

</body> </html> 

</source>


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

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

<input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> 

     </form>
  </body>

</html> 

</source>


Set margin and width for submit button

   <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> <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="" />

  <label for="pname">Password</label>
  <input type="text" name="pname" id="pname" value="" />

  <label for="recall">Remember you?</label> 
  <input type="checkbox" name="recall" id="recall"  class="checkbox" />

  <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


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

   <source lang="html4strict">

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

Contact Form

This is a test.

Please fill out our form below in order to contact me. 

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</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">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send »" class="submit" />
     </form>

Note: Due to our busy schedules, we cannot answer every message.

header

This is a text

</body> </html> 

</source>


Set style for submit hover: text decoration

   <source lang="html4strict">

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

Contact Form

This is a test.

Please fill out our form below in order to contact me. 

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</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">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send »" class="submit" />
     </form>

Note: Due to our busy schedules, we cannot answer every message.

header

This is a text

</body> </html> 

</source>


Set submit button style for input

   <source lang="html4strict">

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

Contact Form

     <form id="form1" name="form1" method="post" action="/">
   
     <label for="fmtitle" accesskey="i">Title</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">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

quid pro quo

</body> </html> 

</source>


Set text-transform: uppercase for button

   <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> <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="" />

  <label for="pword">Password</label>
  <input type="text" name="pword" id="pword" value="" /> 
 
    <input type="submit" name="Submit" value="Submit" class="buttonSubmit" />
 </form>

</body> </html> 

</source>


Style for button submit

   <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> <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" />
 
<input name="reset" type="reset"  value="Reset" class="buttonReset" />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </html> 

</source>


Style for reset button

   <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> <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" />
 
<input name="reset" type="reset"  value="Reset" class="buttonReset" />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" />

</form> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Form_Style/Button&oldid=5591»