浏览网页的时候，表单差不多是最常见的形式之一了。对于某些不自动保存账户和密码的网站来说，天天都要给表单敲账户密码。今天记录一下一个简单的表单怎么制作。制作后的效果图如下：
首先在body中输入该表单的组件和文本成分：两个文本输入框；一个下拉选择框；一个提交按钮；注意这里使用label标签来文本修饰这些组件。
<div id="border1">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your first name...">
<label for="lname">First Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name...">
<label for="country">Country</label>
<select id="country" name="country">
<option value="china">China</option>
<option value="russia">Russia</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
效果如下图所示：
接下来对组件进行竖向排版，在CSS代码区输入以下代码:
input[type=text], select {
width: 100%;/*宽度占据整个屏幕*/
padding: 10px 5px;/*适当填充，拉开文字与框的间距*/
margin: 15px 5px;/*适当填充，拉开框与框的间距*/
display: block;/*以block形式展示*/
border: 1px solid #ccc;/*给文本框加边框美化*/
border-radius: 5px;/*给文本框的直角改为圆角美化*/
box-sizing: border-box;/*这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的*/
}
这里注意使用了属性选择器input[type=text]，这表明选中了输入文本型的输入框。同理可以总结出：
input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框
input[type=submit] - 选中提交的输入框（这个算是按钮了）
效果如下图所示：
接下来在CSS代码段输入以下内容，修饰提交按钮：
input[type=submit] {
width: 100%;/**宽度占据整个屏幕/
background-color: #4CAF50;/*背景颜色设置成绿色*/
color: white;/*文字颜色设置成白色*/
padding: 14px 20px;/*适当填充，增加按钮区域的面积*/
margin: 10px 5px;/*适当填充，调整此按钮与其他组件的间距*/
border: none;/*无外加边框*/
border-radius: 4px;/*边框的直角改为圆角*/
cursor: pointer;/*鼠标移到按钮上改变鼠标指针形状（变成手型）*/
}
效果如下图：
最后在CSS中输入以下代码，最后修饰整个表单：
#border1{
border-style: solid;/*在整个表单外侧添加黑色边框*/
background-color: antiquewhite;/*表单的背景设置为烟灰色*/
padding: 20px 10px;/*适当填充，增加背景的面积*/
border-radius: 5px;/*背景边框改为圆角*/
}
最后结果如上图所示，一个简易的表单就完成了。
全部代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">
input[type=text], select {
width: 100%;
padding: 10px 5px;
margin: 15px 5px;
display: block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 10px 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#border1{
border-style: solid;
background-color: antiquewhite;
padding: 20px 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="border1">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your first name...">
<label for="lname">First Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name...">
<label for="country">Country</label>
<select id="country" name="country">
<option value="china">China</option>
<option value="russia">Russia</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
