表单(用户输入)
表单标签。表单是给用户提供输入和操作的那些控件。
表单都是input标签,但是根据类型的不同,会产生不同的表单。常见的表单有:
输入框 ,我们可以通过一些属性进行设置
可以设置这个输入框的长度,其属性为size:
输入框是进行内容输入的,我们也可以限制输入内容的长度,其属性为maxlength
输入框是用来做输入的,有时候存在不输入会自动给出默认值,其属性为:value
关于表单的区分,我们有id和name两种方式。
id是表单在页面上的相对位置或者说是表单的编号
name是输入的值所存储到哪个变量中
//html/body/input[2] --> 是第2个input标签的位置说明
表单的使用普通文本输入框:
另一个文本输入框:
注作业:
我们有最大长度限制,那应该有最小长度限制(不能为空),如何实现?
value="admin"是默认值,有一种提示这个要输入数据,鼠标点击到文本框中字就没有了。该提示信息的实现
参考答案:
有一种输入框,跟普通文本输入框相似,但是输入的信息都会以*显示,这个叫做密码输入框。
密码输入框的实现是:,密码框的属性与普通文本输入框的属性基本相同。
注:我们输入了这些东西,应该要有一个按钮来进行提交,这时候才能够把用户输入的数据传送出去。
按钮:按钮有三种,分别是:button(普通按钮) submit(提交按钮) reset(重置按钮)
我们想让这个按钮的显示为:点击一下,火箭上天。其可以使用value属性
表单的使用用户名:
提交表单
标签,该标签用来提交到中input表单用户输入的内容我们在提交的时候,提交数据给哪个页面去处理?要有action属性
在处理的时候,有两种方式。分别为:GET和POST,其代码为:
form表单还有一种叫做name的属性
表单的使用用户名:
GET和POST的区别
get请求中,我们用户输入的数据都会在URL中体现出来,以?后面接name变量和值,例如:http://xx.com/?user=admin,但是POST请求是不会在URL中体现数据来
相对而言,POST请求提交的数据前端看不到,所以更安全。
因为GET请求用户输入的数据在URL中,同时URL有最大长度限制(1024字节),所以GET请求一般只能够请求少量数据。
综上所述:如果用户需要提交数据,一般会选择POST请求。
reset按钮
reset本身是重置的意思,在这里,我们可以设计reset按钮来实现form标签组中的input控件回到初始值。
input表单的使用单选框 radio
单选框常用于在一组选项中,只能够选择其中1个,如果选择中其中1个其他的被会置为取消状态。其实现代码为:
要实现代码的单选,首先要让这两个radio是一个组的概念。设置两个radio的name是相同的即可。id是用来区别这两个单选框的,所以id是要不相同的。
我们用value属性来确定这个radio的取值
我们有时候遇到需要默认值的时候,怎么做?使用checked属性
input表单的使用性别: 男
女
复选框checkbox
复选框可以实现多个选中,会产生多个值。与单选框的区别就只有type的值不相同,它的值为:checkbox
input表单的使用爱好:运动
聊天
玩游戏
下拉列表select(选择列表)
实现的就是通过下拉菜单来选择我们需要的数据,我们需要使用select标签实现下拉框,需要使用option标签确定选项的值。
要实现值的传递,在option中要确定value属性才能够获取到真正的下拉选项的值。
值是应该传递给到一个name变量来存储,要写在select标签中
要改变默认显示的值,用selected属性来实现
select表单的使用生日:
月份:
1月
2月
3月
文本域标签,实现的是多行文本输入,包含如下属性:
也有name属性来保存用户输入的数据,记录的就是变量值,除了有name属性当然也少不了id属性
有用户输入,意味着我可以有默认值,默认值用value="值"
因为是多行文本输入,所以我们可以设置行数(rows)和列数(cols)
select表单的使用