美文网首页
html5 表单元素

html5 表单元素

作者: allenMun | 来源:发表于2016-01-23 15:15 被阅读0次

    1 表单元素
    作用:表示用于获取影虎输入的数据
    (1)form 设置html表单
    <form method="post" action="http://www.haosou.com/">
    <button>提交</button>
    </form>
    属性
    action:表示表单提交的页面
    methd:表示表单的请求方式:有POST 和GET 两种,默认GET
    autocomplete:设置用户自动完成功能

    (2)input 用户输入数据的文本框
    <input name="user" type="username">
    属性
    type:input 元素的类型
    name:定义input 元素的名称,以便接收到相应的值

    (3)<label> 添加说明标签
    <p><label for="user">用户名:<input id="user" name="user"></label></p>

    (4)<filedset>对表单进行编组
    <fieldset>...</fieldset>
    属性
    name : 设置分组名称
    <legend> : 设置分组名称
    <fieldset>
    <legend>注册表单</legend>
    <p><label for="user">用户名:<input id="user" name="user"></label></p>
    </fieldset>

    (5) <button type="submit"></button> 添加一个按钮
    属性
    submit 表示按钮的作用是提交表单,默认
    reset 表示按钮的作用是重置表单
    button 表示按钮为一般性按钮,没有任何作用

    2 input的类型
    type类型
    (1)<input type="text">
    maxlength : 设置输入框的最大字符
    size: 文本框宽度
    value: 设置默认值
    list : 为文本指定提供建议值的datalist元素
    placeholder : 输入密码的提示
    <input list="list" name="friuit" type="text">
    <datalist id="list">
    <option value="1">评估</option>
    </datalist>

    (2)<input type="password"> 隐藏字符的密码框
    (3)<input type="checkbox">复选框,用户勾选
    (4)<input type="radio"> 单选框,只能在几个中选一个
    checked : 设置默认选中项
    (5)<input type="submit"> 提交按钮
    (6)<input type="reset"> 重置按钮
    (7)<input type="button"> 普通按钮
    (8)<input type="file"> 生成一个上传控件
    (9)<inout type="img" src="image.jpg"> : 成一个图片按钮,点击图片就实现提交功能,并且传送了分区响应数据。图片按钮也提供了一些额外属性。
    alt : 图片说明
    src: 图片路径
    (10)<input type="hiddden"> 生成一个隐藏控件

    4 下拉菜单
    <select name="fruit">
    <optgroup label="果汁">
    <option value="1">苹果</option>
    <option value="2">香蕉</option>
    <option value="3">梨子</option>
    </optgroup>
    <optgroup label="水果">
    <option value="1">苹果汁</option>
    <option value="2">香蕉汁</option>
    <option value="3">梨子汁</option>
    </optgroup>
    </select>
    <optgroup > 下拉菜单分组
    属性
    name : 设定提交时的名称
    size :设置下拉列表的高度
    multiple :设置是否可以多选

    5 多行文本
    <textarea name="content" wrap="hard" rows="6" cols="9"> </textarea>
    属性
    rows : 设置行数
    cols:设置列数

    相关文章

      网友评论

          本文标题:html5 表单元素

          本文链接:https://www.haomeiwen.com/subject/hcdrkttx.html