表单

ablu56590

墨衍会员 · AI 创作全网分发码龄12年

关注

转载最新推荐文章于 2026-04-20 06:42:16 发布 264 阅读 AI 写同款· GEO 优化 ›

表单是一个包含表单元素的区域，是允许用户在表单中输入信息的元素。

表单标签form，属性action="url"是向后台发送数据的。

表单里有多种输入框，用type进行区分，所有的input标签都要包裹在form表单中。

1、文本输入框

<form action="#">
    文本输入框:<input type="text" name="" value="默认值" placeholder="提示用户输入信息"/>
</form>

input默认为文本输入框，name是后台会用到的数据，value可以在里面设置默认值，placeholder显示提示用户输入的信息，可添加disabled属性禁止编辑文本框。

可以设置其样式text-indent使输入信息缩进一定距离，然后用定位在其前面插入图片，这样就可以做类似天猫登录的输入框。

2、密码输入框

<form action="#">
    密码输入框:<input type="password" />
</form>

输入密码时以黑圆点显示。

3、单选框

<form action="#">
    单选框: 
    <input type="radio" name="sex" id="male" checked/> 
    <label for="male">男</label>
    <input type="radio" name="sex" id="female" /> 
    <label for="female">女</label>
</form>

单选框name属性值必须要一样，否则就不能单选。checked默认被选中。

label标签可以对文字进行关联，即点击文字时对应的单选框会被选中，for属性值和单选框id值一样。

4、复选框

<form action="#">
    复选框:
    <input type="checkbox" name="check" />复选框1
    <input type="checkbox" name="check" />复选框2
    <input type="checkbox" name="check" />复选框3
    <input type="checkbox" name="check" />复选框4
</form>

5、普通按钮

<form action="#">
    普通按钮:<input type="button" value="按钮" />
</form>

6、提交按钮

<form action="#">
    提交按钮:<input type="submit" value="提交" />
</form>

7、重置按钮

<form action="#">
    重置按钮:<input type="reset" value="重置" />
</form>

清空表单中的所有数据。

8、文件上传

<form action="#">
    上传文件:<input type="file" />
</form>

9、多行文本输入框

<form action="#">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

cols控制最小列，rows控制最小行，控制文本大小通常用css去控制，即给宽高即可，这样比较准确。

10、下拉列表

<form action="#">
    <select name="" id="" size="">
        <option value="1">星期一</option>
        <option value="2">星期二</option>
        <option value="3">星期三</option>
        <option value="4">星期四</option>
        <option value="5">星期五</option>
        <option value="6">星期六</option>
        <option value="7">星期天</option>
    </select>
</form>

size控制下拉列表可见数目，multiple属性可以使用户按住Ctrl键多选属性。

11、组合表单

<form action="#">
    <fieldset>
        <legend>组合表单</legend>
        文本框1:<input type="" /><br />
        文本框2:<input type="" /><br />
        文本框3:<input type="" /><br />
    </fieldset>
</form>

结果：

12、实战

示例：

  1 <!doctype html>
  2 <html lang="en">
  3  <head>
  4   <meta charset="UTF-8">
  5   <meta name="Generator" content="EditPlus®">
  6   <meta name="Author" content="XXX">
  7   <meta name="Keywords" content="登录界面">
  8   <meta name="Description" content="登录界面">
  9   <title>登录界面</title>
 10   <style>
 11     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
 12     *{margin: 0; padding: 0;}
 13     ol,ul{list-style: none;}
 14     a{text-decoration: none; color: inherit;}
 15     html{background: #ccc;}
 16     #container{
 17         position: relative;
 18         width: 1920px;
 19         height: 520px;
 20         background: url('./images/dlbg.jpg') no-repeat;
 21     }
 22     #container .con{
 23         position: absolute;
 24         right: 410px;
 25         width: 340px;
 26         margin: 50px 0;
 27         background: rgb(245, 240, 233);
 28     }
 29     #container .con .top{
 30         padding: 30px 45px 0;
 31         border-bottom: 1px dotted #ccc;
 32     }
 33     #container .con .top input{
 34         margin-bottom: 25px;
 35     }
 36     #container .con .top .in{
 37         position: relative;
 38     }
 39     #container .con .top label{
 40         font-size: 14px;
 41         margin-right: 5px;
 42     }
 43     #container .con .top span{
 44         font-size: 14px;
 45         color: #666666;
 46         margin-right: 5px;
 47     }
 48     #container .con .top .in input{
 49         width: 255px;
 50         height: 40px;
 51         text-indent: 55px;
 52         font-size: 16px;
 53     }
 54     #container .con .top .uname,
 55     #container .con .top .upassword{
 56         position: absolute;
 57         top: 0;
 58         left: 0;
 59         width: 40px;
 60         height: 42px;
 61         border: 1px solid #ccc;
 62     }
 63     #container .con .top .uname{background: url("./images/zhanghao.jpg") 0 -1px;}
 64     #container .con .top .upassword{background: url("./images/mima.jpg") 0 -1px;}
 65     #container .con .top .submit{
 66         position: absolute;
 67         top: 0;
 68         left: 0;
 69         z-index: 1;
 70         width: 255px;
 71         height: 40px;
 72         background: url("./images/but.jpg");
 73     }
 74 
 75     #container .con .bottom{
 76         position: relative;
 77         font-size: 14px;
 78         padding: 40px 45px 75px;
 79     }
 80     #container .con .bottom ul{
 81         position: absolute;
 82         top: 25px;
 83         left: 170px;
 84     }
 85     #container .con .bottom ul li{
 86         float: left;
 87         margin: 0 5px;
 88     }
 89     #container .con .bottom ul li i{
 90         float: left;
 91         width: 32px;
 92         height: 32px;
 93         /* border: 1px solid red; */
 94     }
 95     #container .con .bottom ul li .i1{background: url("./images/weixin.png");}
 96     #container .con .bottom ul li .i2{background: url("./images/qqlogin.png");}
 97     #container .con .bottom ul li .i3{background: url("./images/taobao.png");}
 98   </style>
 99  </head>
100  <body>
101   <div id="container">
102     <div class="con">
103         <div class="top">
104             <form action="#">
105                 <div class="in">
106                     <input type="" placeholder="用户名/邮箱地址/手机号" />
107                     <i class="uname"></i>
108                 </div>
109                 <div class="in">
110                     <input type="password" placeholder="填写密码" /><br />
111                     <i class="upassword"></i>
112                 </div>
113                 <input type="checkbox" id="remember" />
114                 <label for="remember">记住账号</label>
115                 <span><a href="#">欢迎注册</a></span>
116                 <span><a href="#">忘记密码？</a></span><br />
117                 <div class="in">
118                     <input type="submit" value="" />
119                     <i class="submit"></i>
120                 </div>
121             </form>
122         </div>
123         <div class="bottom">
124             合作网站账号登录：
125             <ul>
126                 <li><i class="i1"></i></li>
127                 <li><i class="i2"></i></li>
128                 <li><i class="i3"></i></li>
129             </ul>
130         </div>
131     </div>
132   </div>
133  </body>
134 </html>