HTML中的基本表单属性以及H5中新增表单元素与属性
1.form表单：
表单就是专门用来收集用户信息的
2.什么是表单元素?
表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能
3.表单的格式:
注意:表单元素一定要写在表单中
4.常见的表单元素
4.1 input标签input标签有一个type属性, 这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观的不同明文输入框 name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构placeholder:提示 暗文输入框 输入框设置默认值 单选框 注意点:1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。2.要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性。3.单选框的value值，才是我们最终需要的值，并不是单选框显示的值。多选框 多选框默认选中 checked提交按钮 作用: 将表单中已经填写好的数据, 提交到远程服务器注意点:要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址2.需要给需要提交到服务器的表单元素添加一个name属性enctypeapplication/x-www-form-urlencoded 查询字符串，在发送前编码所有字符（默认），转换为?a=a&b=b&c=cmultipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。-附件上传 method="POST"enctype="multipart/form-data"text/plain 用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，一般用于 4.2 email之类的: 普通按钮 可以通过value属性来给按钮指定标题作用: 配合JS完成一些操作图片按钮 作用: 配合JS完成一些操作重置按钮 作用: 用于清空表单中已经填写好的数据注意点:如果想想改重置按钮默认的按钮标题可以通过value属性来修改 隐藏域 隐藏域作用 : 配合提交按钮将一些数据默默的悄悄的提交到服务器4.3 label标签1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定2.要想让输入框和文字绑定在一起, 那么我们可以使用label标签3.绑定的格式:3.1将文字利用label标签包裹起来3.2给输入框添加一个id属性3.3在label标签中通过for属性和输入框中的id进行绑定即可4.4 select标签作用: 用于定义下拉列表格式:注意点:1.下拉列表不能输入内容, 但是可以直接在列表中选择内容2.可以通过给option标签添加一个selected属性来指定列表的默认值3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类4.5 textarea标签作用: 定义一个多行输入框格式:注意点:1.默认情况下输入框可以无限换行2.默认情况下输入框有自己的宽度和高度3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入4.默认情况下输入框是可以手动拉伸的 4.6 fieldset组件fieldset组件用于在一个web表单中对多个控件和标签进行分组格式:
5.H5新增表单元素和属性
h5表单新增表单元素
h5新增表单属性
min 最小值
max 最大值
step 步幅
pattern 正则匹配
autofocus 自动聚焦
required 必填项
placeholder 提示内容
formaction 表单提交地址
formenctype 表单提交的数据格式 查询字符串 纯文本 附件
formmethod 提交表单的方式 get post
formnovalidate 不校验表单 提交按钮
list与datalist进行待选项绑定
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！