河北交通建设投资集团公司网站,在线定制签名,中国住建部和城乡建设部,南京高端网站定制一、表单的用途
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域#xff0c;此区域包含交互控件#xff0c;将用户收集到的信息发送到 Web 服务器。
一个表单有三个基本组成部分#xff1a; 表单标签#xff1a;这包含了处理表单数据所用的URL以及数据…一、表单的用途
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域此区域包含交互控件将用户收集到的信息发送到 Web 服务器。
一个表单有三个基本组成部分 表单标签这包含了处理表单数据所用的URL以及数据提交到服务器的方式。 表单域(表单控件)包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮包括提交按钮、复位(重置)按钮和一般按钮用于将数据传送到服务器上或者取消输入还可以用表单按钮来控制其他定义了处理脚本的处理工作。
HTML5新标签
标签描述form定义供用户输入的表单input定义输入域textarea定义文本域 (一个多行的输入控件)label定义了 input 元素的标签一般为输入标题fieldset定义了一组相关的表单元素并使用外框包含起来legend定义了 fieldset 元素的标题select定义了下拉选项列表optgroup定义选项组option定义下拉列表中的选项button定义一个点击按钮datalist指定一个预先定义的输入控件选项列表keygen定义了表单的密钥对生成器字段output定义一个计算结果
form标签
用来定义表单可以包含多个表单元素
常用属性
. action 提交数据给谁处理 , 即处理数据的程序,默认为当前页面
. method方法 ; 提交数据的方式取值 : get(默认),post
get和post的区别
get: 以查询字符串形式提交数据在地址栏中能看到长度有限制不安全
post: 以表单数据组形式提交在地址栏中式看不到数据的长度无限制安全
. enctype ; 指定提交数据的编码取值application/x-www-form-urlencoded(默认值), multipart/form-data(文件上传时使用)
单行文本框下·
type/表单常用属性:
. name 名称,很重要,如果没有指定name,则该表单元素的数据时无法提交的
. value 初始值,
. size 宽度
. maxlength 最大的字符数
. readonly 只读,readonly“readonly” ; 可以简写readonly,即只写属性名,不写属性,只是变为可读但是数据依旧可以提交
. disabled 禁用 ; disabled“disabled”, 可简写即disabled 完全禁用服务器拿不到数据不能提交
代码演示 form action methodget!-- name可以为表单控件起名其名称在提交表单时会传输给服务器 --!-- value可以为文本框赋默认值 --!-- readonly表示只读 --!-- required表示该信息必填 和表单域结合可以呈现验证内容 --!-- disabled表示禁用 在页面中呈现灰色 --!-- placeholder可以指定文本框输入前的信息提示 --label fortext*普通文本框 /labelinput typetext nametext idtextbr!-- typepassword 表示密码文本框其输入的内容以密文的形式出现 --*密码文本框 input typepassword namepasswordbr!-- typenumber 表示数字数据库只允许用户输入数字小数或者负数 --*数字输入框 input typenumber namenumberbr日期输入框 input typedate namedatebr!-- typetel 在移动端会调起数字键盘 --!-- maxlength11表示输入最大的字符数 --电话号码输入框input typetel nametel maxlength11br!-- typeemail 在移动端会显示 --邮箱输入框 input typeemail nameemailbr!-- typeradio 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 --!-- checked表示默认选中 --*单选框labelinput typeradio namesex value男 checked男/labellabelinput typeradio namesex value女女/labelbr*复选框input typecheckbox namehobby value足球足球input typecheckbox namehobby value排球排球input typecheckbox namehobby value乒乓球兵乓球br搜索框input typesearch namebr!-- typebutton在value属性中可以显示按钮的内容 --*普通按钮input typebutton value普通按钮br!-- typesubmit 结合(form)表单域实现提交效果在表单中 submit 点击之后会自从触发提交行为会向action指定的地址提交请求方式为method指 定的方式通常表单提交为post--*提交按钮input typesubmit value提交按钮br!-- 图片会被当作一个按钮 --input typeimage src../02Day/image/华仔.png height50!-- reset表示重置按钮会让表单回到默认值--重置按钮input typereset value重置按钮br!-- accept属性可以过滤文件 --文件上传框input typefile namefile acceptimg/*br!-- 隐藏域在页面不可见但是可以随着表单一起提交给服务端--隐藏域input typehiddenbr!-- cols相当于width rows相当于heigh --textarea name id cols30 rows10/textareabr!-- selected指定默认选中 --!-- optgroup可以进行分组 label理科属性命名分组的标题 --请选择课程:select namerecouseoptgroup label理科/optgroupoption value高等数学高等数学/optionoption value离散数学 selected离散数学/optionoption value线性代数线性代数/optionoption value概率论概率论/option/select/form
