zoukankan      html  css  js  c++  java
  • HTML5——8form表格

    form表头有两种属性,medthod 和action属性。medthod是发送方式,有post 和get两种,post发送时候在地址栏不显示信息,get发送时显示信息,如用户名 密码等 action 填写请求网站的地址。

    form表格下,大的方向分类有3种。

    1.input类

    type name value 等基本属性

    input 的tpye 类型 有 text password radio checkbox range(滑块) tel email file 等

    password 文本框为黑色圆点看不到具体内容

    textarea 里有行列col row 设置大小 不是width 和height

    2.select类

    select是下拉框

    select 下边主要有option标签 做下拉菜单

    3.button类

    button的type sumbit reset button

    4.一些高级属性应用

    只读 readonly

    默认信息placeholder

    与value的区别是 当写入其他信息时,value内容不会被替换 placeholder 内容会被替换掉

    必填 required 

    禁用 diasable 禁止修改

    pattern 设置字段格式,正则表达式

    表单练习

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>form</title>
    <style type="text/css">

    body div{
    border:1px solid red;
    500px;
    height:600px;
    margin:100px auto;
    text-align:left;
    background-color:#ccc;
    vertical-align:middle;
    }
    #p1 input{
    60px;
    }
    #p1 select{
    60px;
    }
    div h3{
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div>
    <h3>个人信息注册</h3>
    <form>
    <p>姓名:<input type="text" name="name" placeholder="请输入姓名" required/></p>
    <p>密码:<input type="password" name="words" placeholder="请输入6-8位密码" required pattern=".{6,8}"/></p>
    <p>性别:
    <input type="radio" name="sex" />男
    <input type="radio" name="sex" />女
    </p>
    <p id="p1">出生日期:
    <input type="text" name="year"value="2017"/>年
    <select name="month">
    <option value="1" selected>一月</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>
    <option value="8">八月</option>
    <option value="9">九月</option>
    <option value="10">十月</option>
    <option value="11">十一月</option>
    <option value="12">十二月</option>
    </select>月
    <input type="text" name="day"value="1"/>日
    </p>
    <p>爱好:
    <input type="checkbox" name="h" />下象棋
    <input type="checkbox" name="h" />听音乐
    <input type="checkbox" name="h" />玩游戏
    </p>
    <p>自我介绍:<br/>
    <textarea rows="10" cols="50"></textarea>
    </p>
    <p>证件上传:<br/>
    <input type="file" name="file" value="上传"/>
    </p>
    <p>
    <button type="submit">确认</button>
    <button type="reset">重置</button>
    </p>
    </form>
    </div>
    </body>
    </html>

  • 相关阅读:
    oracle 11g 断电后 无法启动 ora 00600 kcratr_scan_lastbwr 修复小计
    arcgis for python (arcpy) 入门
    解决 构造函数 包含业务逻辑 IDE无法初始化界面的问题
    arcgis 10.1 发布 气温插值GP服务小计
    执行 Animation先决条件
    ASP.NET MVC3学习心得视图和模型
    Axure使用心得分享
    ASP.NET MVC3学习心得表单和HTML辅助方法
    ASP.NET MVC3学习心得入门和控制器
    WindowsPhone 中SQL CE数据库的使用
  • 原文地址:https://www.cnblogs.com/haoyp/p/7093069.html
Copyright © 2011-2022 走看看