HTML5权威指南读书笔记06（第13章）--input的一些属性

本文链接：https://blog.csdn.net/weixin_43745804/article/details/109956834

1、input-type：text

以下属性：
size：大小，字符数目
maxlength：最大字符
placeholder：提示性文字
datalist：见第二条
option：见第二条
readonly：只读
disable：禁用
dirname：文本方向
type：password：密码类型
type：submit，reset，button：提交，重置，一般类型

2、使用datalist数据集，option元素文本框值

自动补全建议值

<body>
    <form id="myform">
        <label for="name"><input id="name" name="name"><br/>
        <label for="city"><input id="city" name="city"><br/>
        <label for="fruitlist"><input id="fave" name="fave"><br/>
        <button type="submit">提交</button>
    </form>

    <datalist>
      <option value="苹果"></option> 
      <option value="桔子"></option>  
      <option value="樱桃"></option>  

    </datalist>
</body>

3、用input元素为输入数据把关

input的type类型
checkbox
color
date
datetime
datetime-local
email
month
number
radiobutton
range
tel
time
week
url

4、number用input元素获取数值

list：对应datalist
min：最小值
max：最大值
readonly：只读
required：必须输入值
step：步长
value：初始值

number

<body>
    <form id="myform">
        <input type="number" step="2" value="20" min="0" max="100">
    </form>

</body>

range

<body>
    <form id="myform">
        <input type="range" step="2" value="20" min="0" max="100">
    </form>
</body>

在这里插入图片描述

5、checkbox复选按钮获取逻辑值

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="checkbox" name="check" value="v1"><label>check1</label><br/>
            <input type="checkbox" name="check" value="v2"><label>check2</label><br/>
            <input type="checkbox" name="check" value="v3"><label>check3</label><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

6、radio单选按钮生成一组固定选项

多个radio需要设置相同的name值

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="radio" name="check" value="v1"><label>check1</label><br/>
            <input type="radio" name="check" value="v2"><label>check2</label><br/>
            <input type="radio" name="check" value="v3"><label>check3</label><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

7、email，tel，url接受特定值

会自动校验，可接受正则

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="email" ><label>check1</label><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

8、date，datetime，datetime-local，month，time，week等接受特定值

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="datetime-local" ><label>check1</label><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

9、color获取时间

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="color" ><label>check1</label><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

10、search搜索框

虽然有search，但实际上啥也不做

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="search" ><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

11、hidden隐藏元素

隐藏但实际仍然存在

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="hidden" ><br/>
            <button>提交</button>
        </fieldset> 
    </form>
</body>

12、生成图像按钮和分区响应图

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="image" src="./images/icon.ico" ><br/>
        </fieldset> 
    </form>
</body>

13、file上传文件

<body>
    <form id="myform">
        <fieldset >
            <legend>mylegend</legend>
            <input type="file"  ><br/>
        </fieldset> 
    </form>
</body>

14、select 、option选项列表

select ：列表
option：选项
multiple：多选项

<body>
    <form id="myform">
        <select>
            <option value="apple">apple</option>
            <option value="orange">orange</option>
            <option value="pink">pink</option>
            <option value="banna">banna</option>
        </select> 
    </form>
</body>

<body>
    <form id="myform">
        <select multiple>
            <option value="apple">apple</option>
            <option value="orange">orange</option>
            <option value="pink">pink</option>
            <option value="banna">banna</option>
        </select> 
    </form>
</body>

15、optgroup选项组列表

<body>
    <form id="myform">
        <select>
            <optgroup label="mylabel1" >
                <option value="apple">apple</option>
                <option value="orange">orange</option>
            </optgroup>
            <optgroup label="mylabel2">
                <option value="pink">pink</option>
                <option value="banna">banna</option>
            </optgroup>
        </select> 
    </form>
</body>

16、textarea多行文本

<body>
    <form id="myform">
        <textarea cols="19" rows="3" >hello world</textarea>
    </form>
</body>

17、确保输入值位于某个范围内

min，max：
patter：匹配正则表达式
email及url
novalidate=“false”：禁止验证