http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FForm_Style%2FButton
HTML/CSS/Form Style/Button - История изменений
2026-04-04T21:50:12Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Form_Style/Button&diff=5590&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Form_Style/Button&diff=5591&oldid=prev
Admin: 1 версия
2010-05-26T08:17:02Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Buttons using the button element==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Buttons using the &lt;button&gt; element</title><br />
</head><br />
<body><br />
<form action="" method="post"><br />
<button type="submit">Submit</button><br />
<br /><br /><br />
<button type="reset"><b>Clear this form</b> I want to start again</button><br />
<br /><br /><br />
<button type="button"><img src="submit.gif" alt="submit" /></button><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Change form button style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.button {<br />
padding: 4px;<br />
font-size: 1.5em;<br />
}<br />
.buttonReset {<br />
color: #fcc;<br />
background-color: #900;<br />
border: 1px solid #660;<br />
}<br />
.buttonResetRoll {<br />
color: white;<br />
background-color: #c00;<br />
border: 1px solid #660;<br />
}<br />
.buttonSubmit {<br />
color: white;<br />
background-color: #660;<br />
border: 1px solid #660;<br />
}<br />
.buttonSubmitRoll {<br />
color: white;<br />
background-color: #cc0;<br />
border: 1px solid #660;<br />
}<br />
<br />
</style><br />
<script language="JavaScript" type="text/javascript"><br />
function classChange(styleChange,item) {<br />
item.className = styleChange;<br />
}<br />
</script><br />
</head><br />
<body><br />
<form action="" method="post"><br />
<label for="question">Question?</label><br />
<input type="text"<br />
name="question"<br />
id="textfield"<br />
value="Type answer here" /><br /><br />
<input name="reset"<br />
type="reset"<br />
id="reset"<br />
value="Reset"<br />
class="button buttonReset"<br />
onMouseOver="classChange("buttonResetRoll",this)"<br />
onMouseOut="classChange("buttonReset",this)" /><br />
<input type="submit"<br />
name="Submit"<br />
value="Submit"<br />
class="button buttonSubmit"<br />
onMouseOver="classChange("buttonSubmitRoll",this)"<br />
onMouseOut="classChange("buttonSubmit",this)" /><br />
<br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Define class for input button control==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
<br />
.save {<br />
margin-top: 1em;<br />
width: 5em;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<form method="get" name="copresentations"><br />
<table cellspacing="0"><br />
<caption><br />
Summary of Financial Data<br />
</caption><br />
<tr><br />
<th scope="col">Fiscal Year </th><br />
<th scope="col">Worksite<br /><br />
Presentations </th><br />
<th scope="col">Passing Grades </th><br />
<th scope="col">Number of Presentators </th><br />
</tr><br />
<tr><br />
<th scope="row">2003</th><br />
<td><input type="text" name="w2003" /></td><br />
<td><input type="text" name="p2003" /></td><br />
<td><input type="text" name="n2003" /></td><br />
</tr><br />
<tr><br />
<th scope="row">2004</th><br />
<td><input type="text" name="w2004" /></td><br />
<td><input type="text" name="p2004" /></td><br />
<td><input type="text" name="n2004" /></td><br />
</tr><br />
</table><br />
<input type="submit" class="save" value="Save" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Hide submit button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
.buttonSubmitHide {<br />
display: none;<br />
}<br />
</style><br />
<script language="JavaScript" type="text/javascript"><br />
function classChange(styleChange,item) {<br />
item.className = styleChange;<br />
}<br />
</script><br />
</head><br />
<body><br />
<h2>Order Confirmation</h2><br />
<form action="login.php" method="post" onsubmit="classChange("buttonSubmitHide",submit); return true;"><br />
<div align="center"><br />
<p>Are you sure?</p><br />
<label for="uname">Final Price:</label><br />
<input type="text" name="uname" id="uname" value="$7.95" /><br />
<input type="submit" name="submit" value="submit" class="buttonSubmit" /><br />
</div><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==input types "submit" and "reset" insert buttons for submitting and clearing the form"s contents==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
</head><br />
<body><br />
<form method = "post" action = ""><br />
<p><br />
<input type = "submit" value = "Submit Your Entries" /><br />
<input type = "reset" value = "Clear Your Entries" /><br />
</p> <br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set margin and width for submit button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
<br />
.buttonSubmit {<br />
width: 75px;<br />
margin-left: 95px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<form action="" method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pname">Password</label><br />
<input type="text" name="pname" id="pname" value="" /><br /><br />
<label for="recall">Remember you?</label> <br />
<input type="checkbox" name="recall" id="recall" class="checkbox" /><br /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set style for submit button: border, background color, padding, margin and width==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
<br />
.submit {<br />
border: none;<br />
background-color: #fff;<br />
padding: 0;<br />
margin: 0;<br />
width: 5em;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<br />
<p>This is a test.</p><br />
<br />
<p>Please fill out our form below in order to contact me. </p><br />
<form id="form1" name="form1" method="post" action="/"><br />
<br />
<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label><br />
<select name="fmtitle" id="fmtitle"><br />
<option value="ms">Ms.</option><br />
<option value="mrs">Mrs.</option><br />
<option value="miss">Miss</option><br />
<option value="mr">Mr.</option><br />
</select><br />
<br />
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label><br />
<input type="text" name="fmname" id="fmname" /><br />
<br />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label><br />
<input type="text" name="fmemail" id="fmemail" /><br />
<br />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label><br />
<input type="text" name="fmstate" id="fmstate" /><br />
<br />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label><br />
<input type="text" name="fmcountry" id="fmcountry" /><br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send &raquo;" class="submit" /><br />
</form><br />
<br />
<p>Note: Due to our busy schedules, we cannot answer every message.</p><br />
<br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>header</h2><br />
<p>This is a text</p><br />
</div><br />
<div id="footer"><br />
<p>All rights reserved except where noted.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set style for submit hover: text decoration==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
.submit:hover {<br />
text-decoration: underline;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<br />
<p>This is a test.</p><br />
<br />
<p>Please fill out our form below in order to contact me. </p><br />
<form id="form1" name="form1" method="post" action="/"><br />
<br />
<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label><br />
<select name="fmtitle" id="fmtitle"><br />
<option value="ms">Ms.</option><br />
<option value="mrs">Mrs.</option><br />
<option value="miss">Miss</option><br />
<option value="mr">Mr.</option><br />
</select><br />
<br />
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label><br />
<input type="text" name="fmname" id="fmname" /><br />
<br />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label><br />
<input type="text" name="fmemail" id="fmemail" /><br />
<br />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label><br />
<input type="text" name="fmstate" id="fmstate" /><br />
<br />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label><br />
<input type="text" name="fmcountry" id="fmcountry" /><br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send &raquo;" class="submit" /><br />
</form><br />
<br />
<p>Note: Due to our busy schedules, we cannot answer every message.</p><br />
<br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>header</h2><br />
<p>This is a text</p><br />
</div><br />
<div id="footer"><br />
<p>All rights reserved except where noted.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set submit button style for input==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
<br />
input.submit {<br />
width: 5em;<br />
}<br />
<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<form id="form1" name="form1" method="post" action="/"><br />
<br />
<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label><br />
<select name="fmtitle" id="fmtitle"><br />
<option value="ms">Ms.</option><br />
<option value="mrs">Mrs.</option><br />
<option value="miss">Miss</option><br />
<option value="mr">Mr.</option><br />
</select><br />
<br />
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label><br />
<input type="text" name="fmname" id="fmname" /><br />
<br />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label><br />
<input type="text" name="fmemail" id="fmemail" /><br />
<br />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label><br />
<input type="text" name="fmstate" id="fmstate" /><br />
<br />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label><br />
<input type="text" name="fmcountry" id="fmcountry" /><br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send" class="submit" /><br />
</form><br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>quid pro quo</h2><br />
</div><br />
<div id="footer"><br />
<p>ask.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set text-transform: uppercase for button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.buttonSubmit {<br />
width: 75px;<br />
margin-left: 75px;<br />
color: green;<br />
text-transform: uppercase;<br />
border: 1px solid green;<br />
}<br />
</style><br />
</head><br />
<body><br />
<form method="post"><br />
<label for="uname">Username</label><br />
<input type="text" name="uname" id="uname" value="" /><br /><br />
<label for="pword">Password</label><br />
<input type="text" name="pword" id="pword" value="" /> <br /> <br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Style for button submit==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.buttonSubmit {<br />
color: white;<br />
background-color: #660;<br />
font-size: 1.5em;<br />
border: 1px solid #660;<br />
padding: 4px;<br />
}<br />
</style><br />
</head><br />
<label for="question">Who is president of the U.S.?<br />
</label><br />
<input type="text" name="question" id="textfield" value="Type answer here" /><br /> <br />
<input name="reset" type="reset" value="Reset" class="buttonReset" /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Style for reset button==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.buttonReset {<br />
color: #fcc;<br />
background-color: #900;<br />
font-size: 1.5em;<br />
border: 1px solid #660;<br />
padding: 4px; <br />
}<br />
</style><br />
</head><br />
<label for="question">Who is president of the U.S.?<br />
</label><br />
<input type="text" name="question" id="textfield" value="Type answer here" /><br /> <br />
<input name="reset" type="reset" value="Reset" class="buttonReset" /><br />
<input type="submit" name="Submit" value="Submit" class="buttonSubmit" /><br />
</form><br />
</html><br />
</source></div>
Admin