表单:
概念:用于采集用户输入的数据的。用于和服务器进行交互。
form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
例如:
用户名:
密码:
其中从form开始到form结束的部分,就是用来获取用户数据的。
from的属性:
* action:指定提交数据的URL,'#'意为本地
* method:指定的提交方式,一共7种,2种比较常用,分别是get和post。
get及其特点:
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲 解)。
2. 请求参数大小是有限制的。
3. 不太安全。
如图,输入的信息在地址栏中显示了。
post及其特点:
表单项标签: * input:可以通过type属性值,改变元素展示的样式 * type属性: * text:文本输入框,默认值 1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲 解)
2. 请求参数的大小没有限制。
3. 较为安全
如图,使用post登录后不再在地址栏中显示信息。
表单项中的数据要想被提交:必须指定其name属性,即代码中的username和password。
登录框
该语法提供一个登录框,用户名和密码框是上面语法提供的
表单项标签:通过控制input的type属性来控制
text:文本输入框,默认值
如刚才的输入用户名和密码的代码,它们未曾规定type属性,所以都默认是文本形式。
radio:点击选择框
该段代码提供了一个选择框,如性别男和女和不男不女
性别: 男
女
不男不女
需要注意的是,如果想控制只能选择这几个选项中的一个,那么它们的内幕属性就必须是相同的。
服务器通过这个value属性来得到用户选择的值。
效果图
checkbox:点击复选框
该段代码提供了一个复选框,可供多项选择。
逛街
Java
游戏
效果图
原理和单选框无什么差别。
特别地,两者都可再某个属性上再添加一个 checked 属性,这样会使得该选项会被默认选中。
提示信息(属性):placeholder属性
就是平时那种“请输入用户名的”的提示信息,用户一点就没了。
常用于文本框。
用户名:
效果图
提高点击体验(标签):label标签(配合id属性食用)
label:指定输入项的文字描述信息。
注意:
label的for属性要和 input 的 id搭配着使用。属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
就好比上图中的输入用户名,你点击用户名这三个字,光标就会自动弹入输入框内。
诀窍:要在哪个字上添加该效果就在这个字的前后加上label标签就行了。
具体语法
性别:
隐藏域:hidden
该语法用来创建一个隐藏域
所谓隐藏域就是藏起来看不到的一个东西,但提交时会将该块区域的内容一并提交上去。
几个按钮
几个常用的按钮
第一条语句就是创建一个提交按钮,将页面内的表单交上去。
第二条语句是创建一个普通的按钮,功能要配合js实现。
第三条语句是创建一个带有提交功能的图片,点击即可提交。
该注意的是,此处按钮们的值都是value,而非name;
总结
value属性带的值似乎是真真切切提交到服务器上的值,而name属性则似乎是数据库表中的属性列名,如"性别"“姓名”"年龄"等。
根据以下图推断。