html 重置表单输入框,HTML 表单的用法

HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

下面介绍表单常见元素的简单用法。

1.form元素

HTML 表单用于收集用户输入。

元素定义 HTML 表单，是表单的外壳

常用属性：

action:表单提交的地址

method:提交表单的方法，一般有get和post两种方式，

区别:

1.表象不同，get把提交的数据url可以看到，post看不到

2.原理不同，get 是拼接 url， post 是放入http 请求体中

3.提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制

4.get提交的数据在浏览器历史记录中，安全性不好

5.场景不同，get 重在 "要", post 重在"给"

target:在何处打开action

enctype:

application/x-www-form-urlencoded：在发送前编码所有字符(默认)

text/plain：空格转换为"+"加号，但不对特殊字符编码

multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

2.input元素

input 元素通过 type 属性来设置不同的input 类型。 元素是最重要的表单元素。

2.1文本输入

定义用于文本输入的单行输入字段：

姓名

效果：

placeholder的参数可以作为输入的提示(提示用户输入内容和格式)，与value不同，placeholder并不是input中真的内容，在输入时placeholder会消失而不是代替。

2.2 密码域

密码

效果：

密码域的输入框会对输入信息做掩码处理。

2.3 复选框

爱好

dota

旅游

宠物

效果：

name 属性为相同的复选框元素会被分到同一个分组。复选框的 value 值是必须有的，否则后台接收到数据无法识别究竟勾选了什么值。可以对 input 标签增加 checked 属性实现预选。

2.4 单选按钮

性别

男

女

效果：

单选按钮和复选框一样，通过相同的name 属性值来识别同一组按钮，value 属性是必需的。可以对 input 标签增加 checked 属性实现预选。value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

注释： 和 中必须设置 value 属性。

注释：value 属性无法与 一同使用。

2.5 下拉列表

我的car：

奥迪

奔驰

萨博

效果：

option 的 value 属性是必需的，可以对 option 设置 selected 属性实现预选择。

2.6 提交按钮

效果：

2.8 重置按钮

效果：

重置按钮会清空表单中填写的内容

2.9 打开文件

效果：

accept="image/png"，只接受png格式文件，可设置选择的文件格式

3.label 元素

姓名

label 元素为 input 元素定义标注，当鼠标选择该标签时，关联的元素控件会获得焦点，for 属性与关联元素的 id 属性要相同。

4. textarea 元素

ddd

效果：

展示输入框，可以拉选大小