一,什么是表单
- 可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁。如下图:
二,表单标签<form>
- 所有的表单内容都应放在<form>标签内部,如下图:
- 如上图所见,表单标签
<form>
有两个属性action
和method
1.action
:这个属性规定该表单提交的信息存储的文件以及它的地址,例如:
2.
method
:这个属性规定该表单的提交方式,方式有两个get/post
,默认是get
PS:
get
和post
的不同点:①:提交数据的方式不同,
get
可以再url上看到提交的数据,post
会在url上隐藏提交的数据;②:
get
只能提交少量数据,数据的容量是1k以内;post
可以提交大量数据,但是不能超过服务器的容量;③:
get
提交的数据会显示在浏览历史中,安全性比post
要差;④:
post
是给:一般用于账号密码的输入;get
是要:一般用于搜索引擎的关键词提交;
三,输入标签<input>
- 用处:
<input>
标签一般用于给用户输入信息,服务器收集用户输入的信息; -
<input>
标签的用法
1.用户名:<input type = "text" name="username">
,和密码框一样都是单行输入框,用于给用户输入账号用户名之类;
效果:
2.密码框:<input type = "password" name="password">
,用于给用户输入密码,输入后信息会被伪装成小圆点;
效果:
3.单选框:<input type = "radio" name="sex" value="男">
,用于给用户选择只能选择一项的选择,
PS:
①:单选框name属性必须要有,且每个选项的name值必须相同;
②:value属性的值也要有,否则提交后服务器显示的是on,就不能获悉提交的内容是什么;
效果:
4.复选框:<input type = "checkbox" name="car" value="奥迪">
,多项选择
PS:复选框name属性的值可以不一样,但是推荐一样方便用于分类;
效果:
5.文件上传:<input type="file" name = "上传文件的在服务器的名字" accept="规定文件类型">
,用于给用户上传文件
效果:
6.隐藏域:<input type="hidden" name = "上传到服务器该数据的key" value="上传到服务器该数据的值">
用户看不见这个区域,常用于暂存数据和安全性校验;
四,下拉菜单标签<select><option>
- 用法:
- 效果:
五,文本域<textarea>
-
用法:
六,<label>标签
- 用法:给输入框起名,并且点击这个名字就能自动跳转到该输入框,有for属性,链接该<label>标签的<input>标签要填写id属性,并且id属性的值和for属性的值要相等;
-
图示:
七,一些常用的<input>标签属性
- placeholder:用于提示用户该输入框内容,如下:
- selected:默认选项,未选择情况下默认选择该选项,如下:
- maxlength:规定输入框的最大输入字数,如下:
- disabled:该输入框禁止输入,如下: