HTML5 之 Input 标签

按钮类

普通按钮

<input type="button" name="" id="" value="普通按钮" />

提交按钮

点击会提交表单内容，跟表单组合使用

<input type="submit" name="" id="" value="提交按钮" />

清空按钮

点击会清空表单内容，跟表单组合使用

<input type="reset" name="" id="" value="清空按钮" />

选择框

一组选择框，name 属性 需要一直。

单选框

单选框类型：type="radio" ,多个单选框的 name 需要一直才能互斥。

<label>男<input type="radio" name="sex" id="" value="male" /></label>
<label>女<input type="radio" name="sex" id="" value="female" /></label>

复选框

<label>男<input type="checkbox" name="sex" id="" value="male" /></label>
<label>女<input type="checkbox" name="sex" id="" value="female" /></label>

邮箱 & 电话 & 网址

设置不同的类型，支持 HTML5 的浏览器，会在提交的时候。对内容进行初步的校验。

<label>邮箱：<input type="email" name="" id="" value="" /></label>
<br>
<label>电话：<input type="tel" name="" id="" value="" /></label>
<br>
<label>网址：<input type="url" name="" id="" value="" /></label>

自定义校验规则

• 添加 pattern 属性，就支持使用 正则表达式，进行内容校验。
• placeholder 属性，能友好的提示
• required 自动非空校验
• maxlength 能输入的最长的长度

<label>邮箱：<input type="email" pattern="\w[-\w.+]*@(163.com|126.com)" placeholder="仅限163和126邮箱" required name="" id="" value="" /></label>
<br>
<label>电话：<input type="tel" pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}" placeholder="仅限座机号码" maxlength required name="" id="" value="" /></label>
<br>
<label>网址：<input type="url" pattern="^((https|http)?:\/\/)[^\s]+" placeholder="仅限以http和https开头的网址" required name="" id="" value="" /></label>

输入框备用选项

list 属性 和 datalist 标签搭配使用，通过 id 关联起来，实现参考效果。

<label> 明妃：<input type="text" list="urllist" name="" id="" value="" /></label>

<datalist id="urllist">
    <option value="https://bigdataboy.cn/">大数据男孩</option>
    <option value="https://douyin.bigdataboy.cn/">抖音无水印解析</option>
 </datalist>

数据类

数字类

3 个可选属性

• min：显示的最小值
• max：显示的最大值
• step：步长

<label>年龄：<input type="number" min="1" max="10" step="2" name="" id="" value="" /></label>

数据滚动条

<label>数据滚动条：<input type="range" name="" id="" value="" /></label>

文件上传

默认情况下，enctype 属性被设置为 "application/x-www-form-urlencoded"，它会对所有的字符进行编码，并不适用于文件传输。文件传输需要将该属性设置为 "multipart/form-data"。

<form action="" method="post" enctype="multipart/form-data">
    <label>请选择您要上传的文件：<input type="file" name="file" id="file" value="" /></label>
    <br />
    <label><input type="submit" name="" id="" value="提交" /></label>
</form>

限定上传文件的类型

input 元素有一个 accept 属性，表示可以选择的文件类型，多个类型之间使用英文的逗号隔开。

前端的限制并不能真正起作用，还是需要后端判断。

<label><input type="file" name="file" id="file" value="" accept="image/*" /></label>

完整限制类型

限定上传文件的尺寸

隐藏技能：通过在上传文件这个 input 元素前面，追加一个 name 为 MAX_FILE_SIZE 的隐藏字段，value 指定允许上传的文件尺寸，单位是字节。

前端的限制并不能真正起作用，还是需要后端判断。

<form action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="MAX_FILE_SIZE" value="1024">
    <label>请选择您要上传的文件：<input type="file" name="file" id="file" value="" accept="image/*" /></label>
    <br />
    <label><input type="submit" name="" id="" value="提交" /></label>
</form>

日期 & 时间

time

小时：分钟

<label>时间：<input type="time" name="" id="" value="" /></label>

date

年月日

<label>年月日：<input type="date" name="" id="" value="" /></label>

month

年月

<label>年月：<input type="month" name="" id="" value="" /></label>

week

能选择某一天，是这年的第几周

<label>年周：<input type="week" name="" id="" value="" /></label>

datetime-local

完整的时间

<label>年月日时分：<input type="datetime-local" name="" id="" value="" /></label>

其他类型

搜索

其实并没有正真的搜索功能，搜索需要后端实现，只是输入框多了一个 X ，用来清空。

<label>搜索：<input type="search" name="" id="" value="" /></label>

颜色选择

会弹出一个颜色选择框

<label><input type="color" name="" id="" value="" /></label>

图片类型

需要带上 src一起使用

<label><input type="image" src="图片路径" /></label>

隐藏 Input 标签

<label><input type="hidden" name="" id="" value="" /></label>