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.带预定义的选项列表:

image.png

---

7. 定义复选框。

I have a bike
I have a car 

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

image.png

image.png

---

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

image.png

---

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

---

10. 用于输入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方法: