HTML表单

HTML表单总结:供大家夯实基础

<form></form>

表单中一般需要嵌套表格。改变表格中的行就是表单,表单主要用于收集用户信息

表单的常用属性:

method:指出表单数据的提交方式

enctype:指出表单数据的编码方式

action:表单提交的URL

表单的<input>元素

1:文本框:密码框

文本框:<input type="text"/>
密码框:<input type = "password"/>

主要属性

value属性:由访问者只有输入任何文本框

maxlength属性:限制输入的字符数

readonly属性:设置文本控件只读

2:按钮

提交按钮:<input type ="submit"/>

重置按钮:<input type = "reset"/>

提交按钮:<input type ="submit"/>

重置按钮:<input type = "reset"/>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <form method ="post">
        <h1 >
        &nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp
        增加管理员
        </h1>
        <table width ="600px">
            <tr>
                <td width ="80px">姓名:</td>
                <td width = "180">
                <input name ="UserName"/>
                </td>
                <td>10个字符以内的字母或下划线组合</td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password"maxlength = 6 name="pwd"/></td>
                <td>6位数字</td>
            </tr>
            <tr>
                <td>重复密码:</td>
                <td><input type="password" maxlength = 6/></td>
                <td>2次密码必须相同</td>
            </tr>
            <tr>
                <td></td>
                <td>
                <input type="submit"/>&nbsp;&nbsp;&nbsp;&nbsp
                <input type="reset">
                </td>
                <td></td>
            </tr>
        </table>
    </form>
 </body>
</html>

 

代码运行效果:

3:单选框并扩大选中区域:

<td><input  type= "radio"/>  </td>

<tr>
                <td>性别:</td>
                <td><input id = "radmal" type ="radio" name="gender" value = "mal"> <label for = radmal>男士</label></td>
                <td><input id = "radfe" type ="radio" name="gender" value = "mal" checked> <label for = radfe>女士</label></td>
            </tr>

代码效果:

 

4:checkbox:多选框

当input为checkbox时候,文本框为多选框

<tr>
                <td width = "150px"><input id = "chbbox" type ="checkbox" name="gender" value = "mal" > <label for = chbbox>学生管理员</label></td>
                <td><input id = "chbadm" type ="checkbox" name="gender" value = "mal" > <label for = chbadm>超级管理员</label></td>
                <td><input id = "chbtech" type ="checkbox" name="gender" value = "mal" > <label for = chbtech>管理员</label></td>
                
</tr>

程序截图:

 

复选框:<select>

           </select>

复选框主要用于选项很多的时候,selected默认选项

<tr>    
                <td>状态</td>
                <td>
                <select name = "status">
                    <option value = "1">在线</option>
                    <option value = "0">离线</option>
                    <option value = "-1" selected>忙碌</option>
                </select>
                </td>
                <td></td>
<tr>

程序截图:

 

多选列表:在多选框中增加multiple size 即可

<tr>
                <td>所属中心:</td>
                <td>
                    <select name="center" multiple size = "5">
                        <option value = "zgc">中关村</option>
                        <option value = "xjh">徐家汇</option>
                        <option value = "dmh">大明湖</option>
                        <option value = "ztf">总统府</option>
                        <option value = "bsh">宝山寺</option>
                        <option value = "hmt">画眉潭</option>
                        <option value = "ryt">日月潭</option>
                    </select>
                </td>
                <td></td>
</tr>

 

文件控件:

<tr>
                <td>头像:</td>
                <td > <input type = "file"/>选择文件<td/>

<tr>

 

文本域:

备注:<textarea></textarea>

<tr>
                <td>备注:</td>
                <td><textarea style = "width:200px;height:80px;resize:none"></textarea><td/>
                
</tr>

程序效果图:

 

你可能感兴趣的:(HTML表单)