h5新增表单属性

261 阅读3分钟
表单:
action、method、enctype、name、target
<input>.type可取的值:text、password、hidden、radio、checkbox、image、submit、reset、button
    属性没有太多变化和以前一样
    disabled:设置首次加载,禁用(在显示上为禁用效果)
    readonly:设为只读,用js改变属性(在显示上与其他元素没有区别,无法进行编辑7)
label:定义标签,可以指定id、class、style等属性,还有onclick等事件属性和h4相同,除此之外还有以下属性:
    for:设置关联的表单控件的id属性(隐藏关联)
    显示关联是将控件放在lable里
    作用:对标签产生的事件将会转移到关联控件上,比如标签获得焦点,其实是标签关联的控件获得的焦点
    显示关联IE浏览器不支持
    示例:
    <label>密码:<input type="text" name="pwd"></label>
    <label for="username">用户名:</label>
    <p><input type="text" id="username"></p>
    
新增按钮:
    <button>:用做一个按钮,内部可以包括普通文本、文本格式、图像等
    不能再button之间放置图片映射
    disabled:指定是否禁用此按钮
    name:指定按钮名称
    type:指定属于那种按钮:button、submit、reset等
    value:指定按钮初始值(可不写)
    示例:
    <button type="button"><b>提交</b></button>
    <button type="reset" name="ret"><b>重置</b></button>
    <button type="submit" name="sub"><img src="图片路径"></button>
    
下拉列表:
    optgroud:定义列表项或菜单想组
    label:该项的标签,必填
    dislabel:禁用该列表框
    multiple:是否多选
    size:同时可以显示几个列表项
    option:列表项
    selected:是否被选中
    value:请求的值
    示例:
    <select name="city">
        <optgroup label="河北省">
            <option value="石家庄">石家庄</option>
            <option value="唐山">唐山</option>
            <option value="秦皇岛">秦皇岛</option>
        </optgroup>
        <optgroup label="陕西省">
            <option value="西安">西安</option>
            <option value="榆林">榆林</option>
            <option value="汉中">汉中</option>
        </optgroup>
    </select>
    
新增表单控价属性:
    fromenctype:通过动态按钮改变表单enctype属性
    formmethod:通过动态按钮改变表单以get或post提交
    formtarget:通过动态按钮改变表单target属性
    formaction:通过动态按钮改变表单提交到不同的url
    示例:
    <form name="form1" action="网址" method="post">
     手机号:<input type="tel" name="tel"><br>
     短信验证码:<input type="number" name="code"><br>
     <inpput type="submit" name="but1" value="登录">
     <input type="submit" name="but1" value="注册" formaction="网址" formmethod="get" formtarget="_blank">
    </form>
    
    autofocus:浏览器打开该页面时,改组件自动获得焦点
        打开页面时只能有一个控件获得焦点
    placeholder:当用户还未在单行文本框、多行文本框中输入内容时,单行文本框、多行文本框内就显示对用户的提示信息,一旦用户开始输入,单行文本框、多行文本框内的提示信息会自动消失
    示例:
    手机号:<input type="tel" placeholder="请输入手机号" name="tel" autofocus>
    
list:list与datalist结合使用,是datalist的id属性值
    datalist:相当于看不见的selsct元素,用于生成一个下拉菜单,datalist所能包含的子元素与select元素完全相同,该元素用于指定了list属性的input结合使用
    为了保证list属性具有较好的、一致的行为,建议使用datalist定义下拉菜单时,让每个option元素的文本与value属性值完全相同
    示例:
    <input type="search" name="search" list="info">
    <input type="submit" name="but" value="搜索">
    <datalist id="info">
        <option>服务器</option>
         <option>域名</option>
          <option>虚拟机</option>
    </datalist>
    
    新增文件上传
        file:新增属性
            accept:控制允许上传文件类型
            该属性有一个或多个mime值,多用.分开
        multiple:该属性设置是否选择多个文件
        
   新增客户端校验
   使用校验属性执行校验
   required:该属性指定表单控件必填
   pattern:该属性指定该表单控件的值必须符合指定的正确表达式,该属性必须是一个合法的正则表达式
   
   关联属性:for-id,label-id,list-datalist(id)
   通用属性:disabled,raedonly,required,placeholder
   formXXX:formaction,formmethod,formarget,formenctype
   selest:opgroup,label,datalist