做网站推广托管费用,网站推荐免费的,外贸网站contact,网站用什么切版表单
概述 表单用于收集用户信息#xff0c;用户填写表单提交到服务器 一般传参方式#xff1a; GETPOSTCookie 传参要素 传参方式 GETPOST 参数的名字目标页面内容的数据类型#xff08;只有在上传文件的时候#xff09;
提示信息
一个表单中通常还包含一些说明性的文…表单
概述 表单用于收集用户信息用户填写表单提交到服务器 一般传参方式 GETPOSTCookie 传参要素 传参方式 GETPOST 参数的名字目标页面内容的数据类型只有在上传文件的时候
提示信息
一个表单中通常还包含一些说明性的文字提示用户填写和操作
表单域
相当于一个容器用来容纳所有的表单控件和提示信息可以通过表单域定义处理表单数据所提交到的 url 地址以及数据提交到服务器的方法如果不定义表单域则数据将无法提交给服务器
表单声明
form action method/formform 表单属性 action 代表提交的地址 method 代表提交的方式 get 方法会在 url 中显示提交的内容 post 方法不会在 url 中显示提交的内容而会显示在http中 target _blank 新标签页打开提交的表单_self 当前标签页打开 enctype application/x-www-form-urlencoded 默认传参方式multipart/form-data 只有在文件上传时使用
表单控件
能与用户进行交互的可视化控件包含了具体的表单功能包括 单行文本输入框密码输入框复选框 (点击选择)提交按钮重置按钮等
input输入框
input 属性
属性说明type用来区分文本框的类型。name id标签的唯一标识符。 用来表示当前文本框的名字。 要服务器完成完整的交互传参此属性必不可少。value代表表单元素控件的默认值 如果没有此属性需要从用户获得。disabled代表控件禁用 disabled “disabled”。
type 属性
默认为 typetext
type属性描述textinput 将会接受文本输入password可用于一些私密性和隐私性的内容例如密码button、submit、reset实现一个按钮形式但用于的内容不同实质上都是实现一个按钮形式此时可以为 input 元素设置 value 值为按钮贴上文字radio实现单选框注意同一组单选框 name 属性需要相同否则无法实现单选checkbox实现复选框time时间框week星期框month年月框date日期框datetime_local本地日期和时间search实现搜索框从搜索框字可以看出这个值用于搜索方面的color实现颜色选择框例如ps中的拾色器一样image实现图像按钮将一幅图像作为按钮点击图像任何位置都会做出响应file有时我们需要将文件上传至服务器使用file值将会实现此功能但是如果只给type属性设置为file并不能实现完整的上传操作除需要给form元素中method属性设置为post外还需要将input元素中的enctype属性设置为multipart/form-data。这样就可以完整的上传文件了number设置为此属性输入框只能输入数字range实现数值滚动条hidden将i元素给隐藏email、tel、url对邮箱、电话号码、网址等数据进行把关但是把关方面需要 正则表达式来定义正则表达式通过pattern属性来定义
文本输入框 明文显示输入的内容 form actioninput type
/form 密码输入框 加密显示输入的内容 form actioninput typepassword!-- 密码输入框输入的内容无法看到 --
/form 单选框 typeradio 注意同一组单选框 name 属性需要相同否则无法实现单选 通过 value 属性可以为每个单选框设置不同的标识值以便在后端处理表单数据时进行识别和处理。 form action男input typeradio namesex value男女input typeradio namesex value女
/form 复选框 typecheckbox 注意同一组复选框 name 属性需页要相同 通过 value 属性可以为每个单选框设置不同的标识值以便在后端处理表单数据时进行识别和处理。 form action吃input typecheckbox namelove value吃喝input typecheckbox namelove value喝拉input typecheckbox namelove value拉撒input typecheckbox namelove value撒
/form 普通按钮
input typebutton value按钮上显示的文字提交按钮 typesubmit input typesubmit重置按钮 typereset input typereset上传文件 typefile forminput typefile namephoto
/formtextarea 多行文本框 录入多行数据的文本框 textarea name id cols30 rows10/textarea属性 name 定义控件名称提供给服务器用 cols 代表每行中的字符数 rows 代表显示的行数
label 焦点 用于通过 id 绑定一个表单元素被绑定的表单元素就会获得输入焦点 label forid链接名/labelselect下拉菜单 使用 selectoption value选择1/optionoption value选择2/optionoption value选择3/option
/select练习
!DOCTYPE html
htmlheadmeta charsetutf-8titleform/titlestylelabel{cursor: pointer;display: inline-block;padding: 3px 6px;text-align: right;width: 150px;vertical-align: top;} /style/headbodyh1用户注册/h1form actionhttp://4399.com method传参方法label用户名/labelinput typetext nameusernamebrlabel密码/labelinput typepassword namepasswordbrlabel确认密码/labelinput typepasswordbrlabel性别/labelinput typeradio namesex男input typeradio namesex女brlabel生日/labelinput typedatebrlabel籍贯/labelselect name省份 idoption value选择省份/optionoption valueAmerica/optionoption valueJapan/optionoption valueAustralia/option/selectbrlabel用户协议/labeltextarea name id cols30 rows10 免责声明概不负责/textareabrlabel for头像上传/labelinput typefilebrlabel for操作/labelinput typebutton value普通按钮input typereset value重置按钮input typesubmit value提交按钮 /form/body
/html
