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>

  • 相关阅读:
    Twisted
    day10-redis操作
    day9mysql操作
    day9-paramiko
    day10-rabbitmq
    day9-协程
    day8-异常
    Linux 软连接
    nginx 配置篇
    ansilbe基础学习(一)
  • 原文地址:https://www.cnblogs.com/haoyp/p/7093069.html
Copyright © 2011-2022 走看看