HTML/CSS/Form Style/Button
Содержание
- 1 Buttons using the button element
- 2 Change form button style
- 3 Define class for input button control
- 4 Hide submit button
- 5 input types "submit" and "reset" insert buttons for submitting and clearing the form"s contents
- 6 Set margin and width for submit button
- 7 Set style for submit button: border, background color, padding, margin and width
- 8 Set style for submit hover: text decoration
- 9 Set submit button style for input
- 10 Set text-transform: uppercase for button
- 11 Style for button submit
- 12 Style for reset button
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 <button> 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 »" 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 »" 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>