网站建设费用明细 xls,wordpress 微博时间,WordPress跨机房同步,wordpress酒店表单标签
2.5.1 表单
2.5.1.1 介绍
那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如#xff0c;我们经常在访问网站时#xff0c;出现的登录页面、注册页面、个人信息提交页面#xff0c;其实都是一个一个的表单 。 当我们在这些表单中录入数据之后#xf…表单标签
2.5.1 表单
2.5.1.1 介绍
那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如我们经常在访问网站时出现的登录页面、注册页面、个人信息提交页面其实都是一个一个的表单 。 当我们在这些表单中录入数据之后一点击 “提交”就会将表单中我们填写的数据采集到并提交 那其实这个数据呢一般会提交到服务端最终保存在数据库中 后面的课程中会讲到。 那其实上述的整个窗口是一个表单而表单是一项一项的这个我们称为表单项 或 表单元素。 表单场景: 表单就是在网页中负责数据采集功能的如注册、登录的表单。 表单标签: form 表单属性: action: 规定表单提交时向何处发送表单数据表单提交的URL。method: 规定用于发送表单数据的方式常见为 GET、POST。 GET表单数据是拼接在url后面的 如 xxxxxxxxxxx?usernameTomage12url中能携带的表单数据大小是有限制的。POST 表单数据是在请求体消息体中携带的大小没有限制。 表单项标签: 不同类型的input元素、下拉列表、文本域等。 input: 定义表单项通过type属性控制输入形式select: 定义下拉列表textarea: 定义文本域
2.5.1.2 演示
1). GET方式提交的表单
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单/title
/head
body!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?usernameTomage12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-- form action methodget用户名: input typetext nameusername年龄: input typetext nameageinput typesubmit value提交/form/body
/html表单编写完毕之后通过浏览器打开此表单然后再表单项中录入值之后点击提交我们会看到表单的数据在url后面提交到服务端格式为?usernameTomage12。 2). POST方式提交表单
将上述的表单提交方式由get改为post
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单/title
/head
body!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?usernameTomage12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-- form action methodpost用户名: input typetext nameusername年龄: input typetext nameageinput typesubmit value提交/form/body
/html表单编写完毕之后通过浏览器打开此表单然后再表单项中录入值之后点击提交我们会看到表单的数据在url后面提交到服务端格式为?usernameTomage12。 2.5.1.3 注意事项
表单中的所有表单项要想能够正常的采集数据在提交的时候能提交到服务端表单项必须指定name属性。 否则无法提交该表单项。
用户名: input typetext nameusername2.5.2 表单项
2.5.2.1 介绍
在一个表单中可以存在很多的表单项而虽然表单项的形式各式各样但是表单项的标签其实就只有三个分别是 input: 表单项 , 通过type属性控制输入形式。 type取值描述text默认值定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮date/time/datetime-local定义日期/时间/日期时间number定义数字输入框email定义邮件输入框hidden定义隐藏域submit / reset / button定义提交按钮 / 重置按钮 / 可点击按钮 select: 定义下拉列表, option 定义列表项 textarea: 文本域
2.5.2.2 演示
创建一个新的表单项的html文件具体内容如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单项标签/title
/head
body!-- value: 表单项提交的值 --
form action methodpost姓名: input typetext namename brbr密码: input typepassword namepassword brbr 性别: input typeradio namegender value1 男labelinput typeradio namegender value2 女 /label brbr爱好: labelinput typecheckbox namehobby valuejava java /labellabelinput typecheckbox namehobby valuegame game /labellabelinput typecheckbox namehobby valuesing sing /label brbr图像: input typefile nameimage brbr生日: input typedate namebirthday brbr时间: input typetime nametime brbr日期时间: input typedatetime-local namedatetime brbr邮箱: input typeemail nameemail brbr年龄: input typenumber nameage brbr学历: select namedegreeoption value----------- 请选择 -----------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/select brbr描述: textarea namedescription cols30 rows10/textarea brbrinput typehidden nameid value1!-- 表单常见按钮 --input typebutton value按钮input typereset value重置 input typesubmit value提交 br
/form/body
/html通过浏览器打开上述的表单项html文件最终展示出的表单信息如下 而对于input type“hidden”是一个隐藏域在表单中并不会显示出来但是在提交表单的时候是会提交到服务端的。 接下来我们就点击提交按钮来提交当前表单看看提交的数据
