HTML表单


1.
元素:

HTML 表单用于收集用户输入。
元素定义 HTML 表单的范围:

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

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


2. 元素:

决定了前端上传的形式:

  • 文本的形式:
HTML表单_第1张图片
image.png

 First name:

Last name:

  • 单选按钮的形式:
image.png
Male
Female
那多选菜单怎么办呢?

奥秘就在name的值上,当只有唯一值时只能提交一个数据,所以单选。
如果name值各不相同那就可以多选了。


  • 含按钮的形式
    留到最后因为按钮一般也出现在最后。
Action属性表示负责上传处理的脚本文件
Method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
Value属性是一开始的默认值
HTML表单_第2张图片
image.png
First name:

Last name:


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


HTML表单_第3张图片
image.png

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

GET: 如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。当您使用 GET 时,表单数据在页面地址栏中是可见的:
action_page.php?firstname=Mickey&lastname=Mouse
注释:GET 最适合少量数据的提交。浏览器会设定容量限制。

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


3. 添加
可以美化/隔离不同类型的表单:
Personal information: First name:

Last name:


HTML表单_第4张图片
image.png

4.下拉菜单
PS: style="font-size:30px" 可以调整大小 。


HTML表单_第5张图片
image.png

5.按钮


按下之后跳出弹框

HTML表单_第6张图片
image.png

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

元素为 元素规定预定义选项列表。
元素的 list 属性必须引用 元素的 id 属性

HTML表单_第7张图片
image.png

7. 定义复选框。
I have a bike
I have a car 

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

HTML表单_第8张图片
image.png

HTML表单_第9张图片
image.png

  1. 用于包含一定范围内的值的输入字段。
    根据浏览器支持,输入字段能够显示为滑块控件。

HTML表单_第10张图片
image.png

  1. 用于应该包含电子邮件地址的输入字段。
    根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
    某些智能手机会识别 email 类型,并在键盘增加 ".com" 以匹配电子邮件输入。

  1. 用于输入url,自带前端验证。
HTML表单_第11张图片
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.要上传文件的话怎么办?



可以多选文件:


HTML表单_第12张图片
image.png

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

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

First name:

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

Last name:

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

HTML表单_第13张图片
image.png

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

添加autofocus参数即可

HTML表单_第14张图片
image.png

怎么防止密码被偷窥?
密码:

image.png

怎么自动补全密码?

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

First name:
Last name:
E-mail:
HTML表单_第15张图片
image.png

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

type="number" 限定数据类型
min="1" max="5" 限定数据的大小范围

image.png


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


HTML表单_第16张图片
image.png


怎么限制字段为只读?

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

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

或者使用disabled也行

image.png

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

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


HTML表单_第17张图片
image.png

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

按3*x的梯度自增。


HTML表单_第18张图片
image.png

怎么修改输入框长度?

加入style修改长度:

或者用size方法:

你可能感兴趣的:(HTML表单)