HTML+CSS3自学笔记（HTML篇 表单input标签杂记）

本文章仅用于学习，未经同意请勿转载
本文章为0基础自学笔记，文章略显粗略，如有错误，希望大家指正，感谢！

---

自学来源：
绿叶学习网（HTML入门教程）
菜鸟教程（学习HTML）
B站小甲鱼《零基础入门学习Web开发》（HTML5&CSS3）

type属性

input元素依靠type属性能实现很多有趣又实用的功能。

属性值	功能描述
text	单行文本框
password	密码文本框（输入的数据会带上“ * ”）
radio	单选框
checkbox	多选框
button、submit、reset	按钮（普通按钮，提交按钮，重置按钮）
file	上传文件（需要配合enctype属性使用）
time、date、month、week、datetime-local	HTML5新增的（时间）类型值
search	搜索框
color	颜色选择框
image	添加图片并将图片以按钮方式呈现
hidden	隐藏input元素
number	限定只能数字输入（可通过min，max，step进行其他规定操作）
range	滚动条
mail、tel、url	邮箱、电话、网址

补充

想要成功将表单上传至服务器，除了需要将提交的表单中设置method="post"外，还需正确配置enctype属性

<form action="XXX.php" method="post" enctype="multipart/form-data">
	<label>请选择上传的文件:<input type="file" name="file"></label>
	<br>
	<input type="submit" value="上传文件">
</form>

enctype属性规定了在发送到服务器之前，应如何对表单数据编码，只有正确编码的数据，才能传到服务器上
文件传输应将enctype设置为：enctype=“multipart/form-data”

accept：

为预防蓄意破坏或特殊情况，通常会限制上传类型（使用accept属性）

<input type="file" name="file" accept=".jpg,.avi,.html,.zip" multiple><!--
multiple用于实现上传多个文件
-->

对于音频、视频、图像等可用以下方式

<!--所有音频文件-->
<input type="file" name="file" accept="audio/*"> 

<!--所有视频文件-->
<input type="file" name="file" accept="video/*"> 

<!--所有图像文件-->
<input type="file" name="file" accept="image/*"> 

但一般用户会有“所有文件”可以选择，还是有可能上传其他错误类型的文件，这时候就需要用到PHP实现。我们也可以通过添加限制大小来以防用户上传过大造成服务器等问题，如：

<input type="hidden" name="MAX_FILE_SIZE" value="1024">
<!--类似于给浏览器提个建议，后续在PHP中也会检查这一项，不需要给用户看见，所以使用“hidden”隐藏起来-->

需添加在上传前面

placeholder：

给出提示，让用户知道需要填写什么类型的信息

<input type="mail" name="mail" placeholder="仅限邮箱">

先要用户必须填写某个信息，可加上required属性

<input type="mail" name="mail" required>

size属性和maxlength属性：分别是设置输入框的大小（默认以px为单位），限制文本框内输入的限制长度

list属性和datalist属性：

用于提供用户几个默认选项

<form>
	<input type="url" name="url" list="xxxurl"><!--list=“id”(datalist的id)-->
</form>

<datelist id="xxxurl">
	<option value="https://xxx.com">xxx主页</option>
</datalist>