您的位置：首页 > Web前端 > CSS

利用HTML+CSS创建Form表单

2013-02-03 18:03 274 查看

HTML：

<!DOCTYPE html>
<html>
<head>
<title>Web Form</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header"><h1>Contact Us!</h1></div>
<div id="wrapper">
<div id="inputs">
<form name="input" action="#" method="post">
First name: <input type="text" name="firstname" value="first name"><br/>
Last name: <input type="text" name="lastname" value="last name"><br/>
E-mail: <input type="email" name="email" value="e-mail address"><br/><br/>
</form>
</div>
<div>
<form id="options">
Message: <br/><textarea name="msg"></textarea><br/>
<p>Sex:</p>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female<br/><br/>
<input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.<br/>
<input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.<br/><br/>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>

CSS：

#header {
position: relative;
top: -10px;
background-color: #00A0B0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
height: 40px;
}

h1 {
font-family: Lobster;
color: #FFFFFF;
text-align: center;
}

form {
font-family: Verdana, Arial, sans-serif;
}

p {
font-family: Verdana, Arial, sans-serif;
display: inline-block;
}

input {
font-family: Verdana, Arial, sans-serif;
color: #777;
}

textarea {
vertical-align: top;
width: 400px;
color: #777;
}

#wrapper {
border-left: 1px solid #888;
border-right: 1px solid #888;
border-bottom: 1px solid #888;
position: relative;
top: -10px;
padding-top: 10px;
padding-left: 20px;
padding-bottom: 20px;
box-shadow: 3px 3px 3px #444;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
}

#inputs {
width: 200px;
clear: both;
}

#inputs input {
width: 100%;
clear: both;
}

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航