表单元素
基本都是行盒
一系列元素,主要用于收集用户数据
input元素(空元素)
输入框
重要属性:
- type属性:输入框类型
有text那些啊,表示你输入的内容是文本、数值、日期等等
取值:
text:普通文本输入框
password: 密码框
date: 日期选择框,有兼容性问题
search: 搜索框,有兼容性问题
number:数字输入框
有min最小值、max最大值、step步长
checkbox:多选框
默认选中:checked=“checked”
radio:单选框
默认选中:checked=“checked”
file:上传文件
- value属性:输入框的值
在输入框中生成值,这个值是存在的。若想输入与这个值不同的值,要先删除这个值。
什么类型的文本框都可以使用
- placeholder属性:显示提示的文本
在输入框中生成提示值,这个值是虚拟的,你直接输入新的文本,这个值就没有了。
这个值在文本框中没有文本时显示
什么类型的文本框都可以使用
- autofocus
自动获取焦点 设置一个元素就好了,设置多个不能触发此效果
- autocomplete
聚焦时会出现你提交过的数据,选择后自动完成;很多元素默认有这个属性。
取值为 on:打开,off:关闭,前提:1.以前成功提交过(因为它提示的就是以前提交过的数据),2.有设置name属性
- form
平时所有的表单元素都应该是放在form表单里,这样方便提交数据。而有时候,有些表单元素一定要放在form外面,
但又想把数据和前面的form表单一起提交,这个时候就要用到form属性了。用这个属性需要为那个form表单设置id值,
然后把form属性的取值为那个form表单的id值。
<body>
<form action="">
<!--
name 用于辅助提交数据,都要添上
placeholder 提示文本
autofocus 自动获取焦点 设置一个元素就好了,设置多个不能触发此效果
autocomplete 聚焦时会出现你提交过的数据,选择后自动完成;很多元素默认有这个属性。
取值为 on:打开,off:关闭,前提:1.以前成功提交过(因为它提示的就是以前提交过的数据),2.有设置name属性
required 必须输入,即是设置了这个属性的元素必须有输入值,没有输入会阻止你提交
pattern 判断输入的内容格式是否正确,取值为正则表达式,格式不正确也会阻止你提交
multiple 允许选择多个文件或输入多个邮箱地址(以逗号分割)
form 平时所有的表单元素都应该是放在form表单里,这样方便提交数据。而有时候,有些表单元素一定要放在form外面,
但又想把数据和前面的form表单一起提交,这个时候就要用到form属性了。用这个属性需要为那个form表单设置id值,
然后把form属性的取值为那个form表单的id值。
-->
<!--
扩展关于表单的DOM事件:
input事件 当文本输入框input发生了变化就会触发这个事件
invalid事件 当表单元素验证不通过时会触发这个事件,并且通过this.setCustomValidity('string')可修改错误提示
-->
用户名: <input type="text" name='userName' placeholder="请输入你的名字" autofocus autocomplete='on'> <br>
密码: <input type="password" name="userPwd" required pattern='^(\+86)?1\d{10}$'> <br>
文件: <input type="file" name="photo" id="" multiple> <br>
邮箱: <input type="email" name="userEm" multiple> <br>
<button>提交</button>
</form>
<script>
var userPwd = document.getElementsByName('userPwd')[0];
userPwd.addEventListener('invalid',function(){
this.setCustomValidity('不能为空');
},false)
</script>
</body>
制作按钮
input表示按钮时type的值为:
可以通过value修改按钮上的文本
reset: 重置按钮
button: 普通按钮
submit: 提交按钮
select元素
爱好:
<select multiple="multiple">
<optgroup label="体育">
<option>篮球</option>
<option>足球</option>
<option>网球</option>
</optgroup>
<optgroup label="多媒体">
<option>音乐</option>
<option>电影</option>
<option>网文</option>
</optgroup>
</select>
select元素:下拉列表
子元素option元素:下拉列表的选项
默认选中:selected=“selected”
用optgroup可以将子元素option分类
optgroup的属性label来命名类名
textarea元素
文本框,多行文本框
按钮元素
button
type属性:reset(重置按钮),submit(提交按钮),button(普通按钮),默认值为submit(提交按钮)
<!-- 建议把type设置为button(普通按钮) -->
<button type="button">这是一个按钮(按钮的名称可写在者)(也可以在这放图片等来作为按钮)</button>
表单状态
readonly属性:布尔属性,表示是否只读,不会改变表单显示样式
disabled属性:布尔属性,表示是否禁用,会改变保单显示样式.
配合表单元素的其它元素
label 元素
普通元素,通常配合单选和多选框使用
- 显式关联
可以通过for属性,让label元素关联某一个表单元素,for属性书写表单元素id的值
<!-- 将“男、女”这个元素或文本关联到input属性,使得点击男、女文本都可以选中 -->
请选择性别:
<input id="nan" name="xb" type="radio">
<label for="nan">男</label>
<input id="nv" name="xb" type="radio">
<label for="nv">女</label>
- 隐式关联
<!-- 将“男、女”这个元素或文本关联到input属性,使得点击男、女文本都可以选中 -->
请选择性别:
<label>
<input name="xb" type="radio">
男
</label>
<label>
<input name="xb" type="radio">
女
</label>
datalist 元素
数据列表
该元素本身不会显示到页面,通常用于和普通文本框配合使用
form元素
通常,会将整个表单元素,放置form元素的内部。
作用是当提交表单时,会将form元素内部的表单内容以合适的方式提交到服务器。
form元素对开发静态页面没有什么意义
fieldset 元素
表单里面进行分组
有子元素:legend,用于写该组的组名
<fieldset>
<!-- 组名写在legeng里 -->
<legend>分组的组名</legend>
<!-- 下面写该分组下的表单元素 -->
</fieldset>