锦州做网站公司哪家好,搞定设计在线制作,游戏试玩网站怎么做,网站维护教程文章目录 表单什么是表单GET和POST两种提交方式有什么不同?表单元素表单项外文本单行文本输入框单行文本密码框单选框复选框下拉列表框上传文件隐藏域填写邮箱填写电话填写数字填写日期进度条多行文本输入框提交按钮取消按钮 用户注册案例 表单
什么是表单
form:表单元素 此… 文章目录 表单什么是表单GET和POST两种提交方式有什么不同?表单元素表单项外文本单行文本输入框单行文本密码框单选框复选框下拉列表框上传文件隐藏域填写邮箱填写电话填写数字填写日期进度条多行文本输入框提交按钮取消按钮 用户注册案例 表单
什么是表单
form:表单元素 此元素可以通过嵌套在内部的各种表单项元素 以键值对的形式收集用户填写的信息例如用户名密码等,当表单提交时最终将信息提交到action设置的目的地 action:属性表示表单提交到的目的地 method:提交表单的方式存在以下两种方式 get和post
GET和POST两种提交方式有什么不同?
GET:提交表单速度快安全性低通过浏览器的地址栏进行传输 格式为 目的地?keyvaluekey2value2key3value3keyNvalueN 最多传递256个字符不支持中文 仅仅支持字符串 如果使用链接则肯定为get
POST:提交速度慢安全性高不通过浏览器的地址栏传递无法从地址栏发现用户书写的内容通过消息体传递值格式与get一致不支持中文没有大小限制如果进行上传操作则必须使用post注意链接提交无法使用post必须是get。
表单元素
表单项外文本
label:用来设置表单项外的文本for属性对应表单项中的id属性
label fornameid用户姓名:/label单行文本输入框
typetext此属性为固定写法 name:表示键值对的键可以随意书写不能不写 id:对应label中的for属性使之连为一体 required:属性表示不能不填 minlength:表示最小长度 maxlength:最大长度 placeholder:单行文本输入框的提示文本当用户书写时消失 value:此属性一般不书写就表示键值对的值用户在此单行文本输入框中输入的值就是value值 autocomplete:设置为off则关闭自动完成功能 autofocus:自动获得焦点在很多场合此属性使用较多但是兼容性较差有时需要手动实现此功能
input typetext namemyname idnameid required minlength4 maxlength8placeholder请输入用户姓名 autocompleteoff autofocus单行文本密码框
typepassword此属性为固定写法 name:键值随意书写 所谓的随意书写: 尽量不要涉及以下几种情况 a:中文 b:空格 c:横线 - d:数字开头 e:特殊字符 如果想隔开字符则可以使用_例如 user_name 其它属性与单行文本输入框完全一致 注意 在前端领域id属性不管使用何种技术id上下文唯一maxlength和minlength不作为验证的手段一般复杂的验证多使用js或者正则表达式这两个属性浏览器差异性及其严重 input typepassword namemypass idpassid required autocompleteoffmaxlength8 minlength4 placeholder请输入用户密码单选框
typeradio checked:表示默认选中 name值必须相同
label性别:/label
input typeradio namegender value0 checked /女
input typeradio namegender value1 /男复选框
typecheckbox
label爱好:/label
input typecheckbox namehobby valuesoccer /足球
input typecheckbox namehobby valuerunning /跑步
input typecheckbox namehobby valuesleep /睡觉
input typecheckbox namehobby valueshopping checked /购物
input typecheckbox namehobby valuegame /游戏下拉列表框
selected默认选中
label forlocationid归属地:/label
select namelocation idlocationidoption valuehubei湖北/optionoption valueguangdong广东/optionoption valueshandong selected山东/optionoption valuesichuan四川/optionoption valuezhejiang浙江/option
/select上传文件
typefile 这是唯一一个必须将method属性设置为post的表单项并且value值不再是字符串
label forupid上传文件:/label
input typefile nameup idupid /隐藏域
typehidden 用户无法从页面中查看隐藏域一般是开发者放置在表单中的一个 元素当表单提交时以键值对的形式在用户不知情的情况下提交到服务器端 多使用在分页修改等场合
input typehidden namethisiskey valuethisisvalue /
填写邮箱
typeemail 必须填写合法的邮箱名否则无法验证通过 XXXXXX.com .com 公司 .net 网站 .gov 政府 .org 组织
label foremailid输入邮箱:/label
input typeemail nameemail idemailid required /填写电话
typetel 必须填写合法的电话 这个电话一般还是要搭配正则表达式这里的pattern属性就对应正则表达式
label fortelid输入电话:/label
input typetel nametel idtelid required /填写数字
typenumber max:最大值 min:最小值
label fortestid考核成绩/label
input typenumber namenumber idtestid min0 max100 value60 /分填写日期
typedate 选择的日期按照 yyyy-MM-dd 年月日的格式输出
label fordateid出生日期:/label
input typedate namedate iddateid required /进度条
兼容性较差
进度条:meter max100 min0 value60/meter多行文本输入框
必须是开闭合标签 cols:一行可以输入多少个字符 rows:可以存在几行
label forweiboid您有什么新鲜事告诉大家:/label
textarea nameweibo idweiboidcols30 rows5 required /textarea提交按钮
typesubmit 注意按钮不书写name属性仅仅书写value值 表示按键上的文字 点击此按钮后如果不违反验证规则则表单 提交到action设置的目的地
input typesubmit value提交 取消按钮
typereset 点击此按钮后所有填写的数据全部清空
input typereset value取消 用户注册案例 !DOCTYPE html
html langzh-CNhead meta charsetUTF-8title用户注册/titlebodycenterdiv idcontainerheader h2~用户注册~/h2 hr width60%/headersectionform actionsuc.html methodpostlabel fornameid用户姓名:/labelinput typetext namemyname idnameid required minlength4maxlength8 placeholder请输入用户姓名 autocompleteoff autofocusbrlabel forpassid用户密码:/labelinput typepassword namemypass idpassid required autocompleteoffmaxlength8 minlength4 placeholder请输入用户密码brlabel性别:/labelinput typeradio namegender value0 checked /女input typeradio namegender value1 /男brlabel爱好:/labelinput typecheckbox namehobby valuesoccer /足球input typecheckbox namehobby valuerunning /跑步input typecheckbox namehobby valuesleep /睡觉input typecheckbox namehobby valueshopping checked /购物input typecheckbox namehobby valuegame /游戏brlabel forlocationid归属地:/labelselect namelocation idlocationidoption valuehubei湖北/optionoption valueguangdong广东/optionoption valueshandong selected山东/optionoption valuesichuan四川/optionoption valuezhejiang浙江/option/selectbrlabel forupid上传文件:/labelinput typefile nameup idupid /brinput typehidden namethisiskey valuethisisvalue /label foremailid输入邮箱:/labelinput typeemail nameemail idemailidrequired /brlabel fortelid输入电话:/labelinput typetel nametel idtelid required /brlabel fordateid出生日期:/labelinput typedate namedate iddateid required /brlabel fortestid考核成绩/labelinput typenumber namenumber idtestid min0max100 value60 /分br进度条:meter max100 min0 value60/meterbrlabel forweiboid您有什么新鲜事告诉大家:/labeltextarea nameweibo idweiboidcols30 rows5 required /textareabrinput typesubmit value提交 input typereset value取消 /form/section!--footer:h5新增标签表示页脚用来放置作者信息 网站版权 法律合作信息等--footer!--address:用来书写地址等信息--address我是页脚中的版权信息/address/footer/div/center/body
/html
