zoukankan      html  css  js  c++  java
  • 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 = "200px;height:80px;resize:none"></textarea><td/>
                    
    </tr>

    程序效果图:

  • 相关阅读:
    材料用词积累
    SqlServer 数据库/数据表 拆分(分布式)【转】
    SqlServer 数据库读写分离【转】
    (整理)在REHL6.5上部署ASP.NET MVC
    (整理)MySQL_REHL6.5 安装MySQL5.5
    (转)查看SQLServer最耗资源时间的SQL语句
    (转)SQLServer查询数据库各种历史记录
    (转)SqlServer2008 数据库同步:发布、订阅
    (整理)SQL Server 2008 CDC 功能使用
    (整理)EF分页的实现
  • 原文地址:https://www.cnblogs.com/fengdashen/p/5088743.html
Copyright © 2011-2022 走看看