html表单有哪些种类,HTML表单

1.

元素:

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

元素定义 HTML 表单的范围：

如果使用了

那么提交的按钮要使用 type="submit" 才能使HTML5自带的检测执行

onsubmit参数要用在form而不是input里面：

2. 元素:

决定了前端上传的形式：

文本的形式：

image.png

First name:

Last name:

单选按钮的形式:

image.png

Male

Female

那多选菜单怎么办呢？

奥秘就在name的值上，当只有唯一值时只能提交一个数据，所以单选。

如果name值各不相同那就可以多选了。

含按钮的形式

留到最后因为按钮一般也出现在最后。

Action属性表示负责上传处理的脚本文件

Method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)

Value属性是一开始的默认值

image.png

First name:

Last name:

如果要正确地被提交，每个输入字段必须设置一个 name 属性。name中的属性在GET方法中会作为参数传递到URL中,例如name=First时

image.png

什么时候使用POST什么时候使用GET？

GET: 如果表单提交是被动的(比如搜索引擎查询)，并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

POST: 如果表单正在更新数据，或者包含敏感信息(例如密码)。POST 更安全，因为在页面地址栏中被提交的数据是不可见的。

3. 添加

可以美化/隔离不同类型的表单:

Personal information:

First name:

Last name:

image.png

4.下拉菜单

PS: style="font-size:30px" 可以调整大小 。

# 会把cars传过去

Volvo

Saab

Fiat

Audi

# 会把 option 中的 value 对应的值也发过去

image.png

5.按钮

Click Me!

按下之后跳出弹框

image.png

6.带预定义的选项列表:

元素为 元素规定预定义选项列表。

元素的 list 属性必须引用 元素的 id 属性

image.png

7. 定义复选框。

I have a bike

I have a car

可以将同一个参数提交两次，这个使用就不行。

image.png

image.png

用于包含一定范围内的值的输入字段。

根据浏览器支持，输入字段能够显示为滑块控件。

image.png

用于应该包含电子邮件地址的输入字段。

根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

用于输入url，自带前端验证。

image.png

11.通过maxlength限制输入字符串的大小:

12.可以在局部修改form属性的方法:

(1) < input type="submit" formaction="xxx.asp" >

通过覆盖之前的form的action属性从而拥有多个提交按钮并对应于不同动作的 HTML 表单。

(2) formenctype 属性适用于 type="submit" 以及 type="image"的POST方法，规定了表单提交时的编码。

13.怎么把图像作为提交按钮？

文字

# 加入no-repeat可以避免


14.要上传文件的话怎么办？

可以多选文件:

image.png

怎么引用外部表单的内容？

利用id标签确定form值然后再在外部input中用form="id值"

First name:

下面的 "Last name" 字段位于 form 元素之外，但仍然是表单的一部分。

Last name:

怎么在输入框隐写文字提示?

image.png

怎么让加载之后的自动选中某一输入框？

添加autofocus参数即可

image.png

怎么防止密码被偷窥？

密码：

image.png

怎么自动补全密码？

autocomplete 属性规定表单或输入字段是否应该自动完成。

First name:

Last name:

E-mail:

image.png

怎么限制用户只能输数字？

type="number" 限定数据类型

min="1" max="5" 限定数据的大小范围

image.png

怎么限制用户输入为日期？

image.png

怎么限制字段为只读？

readonly 属性规定输入字段为只读(不能修改)：

显示为John但无法修改里面的值。

或者使用disabled也行

image.png

进行复杂的输入限制怎么办？

使用正则表达式呗 ~ 添加pattern参数即可。

image.png

有数字自动叠加功能的按钮:

按3*x的梯度自增。

image.png

怎么修改输入框长度？

加入style修改长度:

或者用size方法: