html5 input properties Form Properties

html5 for the type of input increased url tel Email Number The DATE Pickers the Range input and so on.

type of type email url number such as these in actual use and not much different mainly in the mobile terminal, including Android and ios have some packages for these types, such as phone number will pop up to end only numeric keypad

date pickers there are bigger difference is not only a mobile terminal or pc side, looks relatively tall on, the following example to illustrate it

For the United States point of view, the introduction of layui

date

 <div class="layui-form-item">
        <label class="layui-form-label">date</label>
        <div class="layui-input-block">
            <input type="date" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

Results are as follows pc and mobile terminal

MONTH

 <div class="layui-form-item">
        <label class="layui-form-label">MONTH</label>
        <div class="layui-input-block">
            <input type="month" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

Results are as follows pc and mobile phone side effects above,

week

  <div class="layui-form-item">
        <label class="layui-form-label">MONTH</label>
        <div class="layui-input-block">
            <input type="week" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

Results are as follows pc and mobile end phones end date for elections will automatically calculate the week

time and datetime datetime-loacl there are essentially similar is not detailed

Note that datetime attribute seems to have been abandoned, test it, is not compatible with the browser, there is no problem with datetime-loacl

range input type

 <div class="layui-form-item">
        <label class="layui-form-label">MONTH</label>
        <div class="layui-input-block">
            <input type="range" name="title" min="1" max="100"  required  lay-verify="required" placeholder="请输入标题" autocomplete="off" >
        </div>
    </div>

效果如下

Search inout 类型

Color input 类型

表单属性：

1. autocomplete属性

<form class="layui-form" autocomplete="on" action="">

主要作用就是自动填充，如果在当前页面提交过，下次如果再填写的话，会在输入框下方显示上次提交的内容

如果不需要，只需要在对应的单独input框加入即可

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

2.autofouse属性

            <input type="text" name="title" autofocus="autofocus" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

适用于所有的input标签自动聚焦input框的输入，不需要鼠标点点击，默认打开输入框

3. multiple 属性

规定输入域中可选择多个值适用于<input> 标签的 email和file

            <input type="file" name="title" multiple="multiple"  required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

注意：当使用在邮件上时每个邮件属性需要用英文逗号隔开

4.palceholder 属性

提示框功能很好适用于， text search password url email telephone

            <input type="text" name="title" multiple="multiple"  required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

5. require 属性

这个layui做的比较好还包括对其类型的筛选，比如只能填写number string等

link 可以引入标题栏图标

html5 input properties Form Properties

Guess you like