LouisJ
LouisJ

HTML表单用法

含义：表单是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

标签

image.png

PS：type说明数据类型是文本，name表示这个数据是什么，提交数据给服务器时就是user=value

标签
表单数据必须被标签包裹，不然无法提交
form标签是表单的外壳，主要属性有4个
1.action属性：表单提交的地址
2.method属性：提交表单的方法，有get和post两种
get类型向服务器发送请求实例，图中url为请求，get方式只是数据的简单组合，形成新的url

HTML表单用法_第1张图片
image.png

post类型使用实例
HTML表单用法_第2张图片
image.png

对比&总结：

  • get类型url简单组合，复杂；post类型url简介，安全
  • get类型适合提交数据量少的，例如在服务器搜索一篇论文
  • post类型适合安全性要求高的，或者像提交一片文章这样数据量大的

3.target：在何处打开action
4.enctype：编码方式


image.png

举例

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

  • 给输入框前加上文字
  • label for：在点击输入框前的文字时，对应输入框进入输入状态，需要与input中id的值对应

标签中type的值
所有input都要加上name，不然会无法传输数据
text：普通的文本框，单行输入

password：字符变为黑色小圆点

radio：单选框，对于radio，name属性一样，则所有的选项为一组，只能选中一个
checkbox：复选框
PS：单复选框勾选状态默认都是on，需要在属性中加上value，才能向服务器发送对应的信息

file：页面出现按钮，点击后出现文件夹，让你选择文件上传，其中的accept规定了文件类型

select：下拉菜单。选项用option标签包裹，传输值为value中的值，加上selected的选项是下拉菜单的默认选项。