默认表单

表单是一个包含表单元素的区域，在网页中负责数据采集功能。一个表单有三个基本组成部分：

表单标签：包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、多选框、单选框、下拉选择框和文件上传框等。

表单按钮：包括提交按钮、重置按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者重置输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
下面就写一个最基本的表单

<input type="text">文本框</input><br />
<input type="password" value="123">密码框</input><br />
<input type="hidden" name="hidden_input"></input><br />
<textarea>多行文本框</textarea><br />
<input type="checkbox">多选框</input><br />
<input type="radio" name="sex" value="boy">男</input>
<input type="radio" name="sex" value="girl">女</input><br />
<select size="3">
    <option value="1" selected>被默认选择的</option>
    <option value="2">第二个</option>
    <option value="3">第三个</option>
</select><br />
<input type="file"></input><br />
<input type="submit" value="提交" name="mySubmit"></input>
<input type="reset" value="重置" name="myReset"></input>
<input type="button" value="普通按钮" name="myButton"></input>

一个默认样式的表单，在不同的浏览器会有不同的显示效果，比如上面的表单在IE和Chrome中的显示效果如下：

下面就写几个带有CSS样式的表单练练手

登录表单

首先把HTML写出来很简单

<div class="login">
    <form>
        <h1>Sign In</h1>
        <p>邮箱：</p>
        <p><input type="text" value="mail@address.com"></input></p>
        <p>密码：</p>
        <p><input type="password" value="*******"></input></p>
        <p><input class="submit" type="submit" value="登录"></input></p>
    </form>
</div>

未加任何修饰的表单好丑

下面就开始对表单进行美容

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .login{
        margin: 40px auto;
        width: 400px;
        border:1px solid #007FFF;
        border-radius: 16px;
        overflow: hidden;
    }
    h1{
        font: 35px arial;
        background-color: rgb(249,82,82);
        color: #FFF;
        height: 70px;
        line-height: 70px;
        text-align: center;
    }
    p{
        font:20px arial;
        color:#A8A8A8;
        margin:20px 20px;
    }
    input{
        border:none;
        border-radius: 3px;
        font:15px arial;
        padding: 0 8px;
        color:#A8A8A8;
        background-color: rgb(248,248,248);
        width: 344px;
        height: 32px;
    }
    .submit{
        font:18px "楷体";
        color: #FFF;
        background-color: #33cc77;
        width: 100px;
        height: 28px;
        display: block;
        margin:0 auto;
    }
</style>

效果如下，是不是美多了？

这里面有个有意思的方法，我们可以去掉input元素的border，然后为其添加背景色来增加input的美观度

反馈表单

一个网站在用户反馈页面会用到表单，下面这个例子就模仿下百度Hi的用户反馈界面。

08年到11年高中的时候，一直是百度的粘性用户，后来百度Hi半死不活，这次就算纪念下吧。
原网页是用的table来写的自己没有用，想实现的可以自己写下一练练手
先把HTML准备好：

<div class="wrap">
    <h1>选择与问题描述</h1>
    <form>
        <p>
            问题反馈<span>*</span>
            <select>
                <option selected>客户端版百度HI</option>
                <option>网页版百度HI</option>
            </select>
        </p>
        <p>
            反馈类型<span>*</span>
            <select>
                <option selected>请选择</option>
                <option>下载和安装过程</option>
                <option>界面问题</option>
            </select>
        </p>
        <p>
            提交类型<span>*</span>
            <select>
                <option selected>请选择</option>
                <option>发现一个错误</option>
                <option>提交改进建议</option>
            </select>
        </p>
        <p >
            反馈内容<span>*</span>

        </p>
        <p class="spe">
            <span class="minSize">(限1000个字符)</span>
        </p>
        <textarea></textarea>
        <p>
            上传图片
            <input type="file" class="fileInput"></input>
            <p class="tips">您可以上传1M以内的jpg、jpeg、png和gif格式的图片文件</p>
        </p>
        <div class="line"></div>
        <h1>填写用户信息</h1>
        <p>
            电子邮箱<span>*</span>
            <input type="text"></input>
        </p>
        <p>
            百度账号<span>*</span>
            <input type="text"></input>
        </p>
        <p class="longInput">
            软件版本号<span>*</span>
            <select>
                <option selected>请选择</option>
                <option>百度Hi xx版</option>
                <option>百度Hi xxx版</option>
            </select>
        </p>
        <p class="longInput">
            输入验证码<span>*</span>
            <input type="text"></input>
            <img src="images/genimg.jpg"> <a href="#">看不清？</a>
        </p>
        <div class="buttonDiv">
            <input type="submit" value="提交"></input>
        </div>
    </form>
</div>

看下没有样式的页面：

添加美美的CSS代码：

<style type="text/css">
    *{
        padding:0;
        margin: 0;
    }
    .wrap{
        width: 980px;
        padding:20px;
        margin:40px auto;
        border:1px solid #E8E8E8;
    }
    form{
        position: relative;
    }
    .line{
        margin: 20px auto;
        border-bottom:1px solid #E8E8E8; 
    }
    p{
        margin:25px 72px;
        font:15px/1.125 Microsoft Yahei;
    }
    h1{
        font:18px/1.5 Microsoft Yahei;
        color: #666;
    }
    span{
        color: red;
    }
    select{
        margin-left: 20px;
        width: 150px;
        height: 25px;
        border:1px solid #E8E8E8;
    }
    input{
        margin-left: 20px;
        width: 150px;
        height: 23px;
        border:1px solid #E8E8E8;
    }
    .fileInput{
        width: auto;
        border:none;
    }
    .tips{
        font-size: 12px;
        padding-left:85px;
        color: #999;
    }
    .minSize{
        font-size: 12px;
    }
    textarea{
        position: absolute;
        top:150px;
        left: 162px;
        width: 400px;
        height: 150px;
    }
    .spe{
        margin-bottom: 125px;
    }
    .buttonDiv{
        margin-top: 30px;
        text-align: center;
    }
    .buttonDiv input{
        width: 156px;
        height: 51px;
        background:rgb(51,165,255); 
        color:#FFF;
        border:none;
    }
    .longInput{
        margin-left: 57px;
    }
    .longInput img{
        vertical-align: bottom;
        border:1px solid #E8E8E8;
        height: 25px;
    }
    a{
        font:13px Microsoft Yahei;
        text-decoration: none;
    }
</style>

刷新下页面：

Ok搞定至于为什么写百度Hi呢反馈页面呢，或许是传说中的情怀吧。