目录
【4】list datalist option的结合使用【不常用】
1.textarea 文本框控件
<textarea name="" id="" cols="30" rows="10"></textarea>
【1.1】resize: none
textarea {
resize: none;
}给文本域添加如图属性，文本框不能拖拽。没有添加时，鼠标移至右下角是可以拖拽的
【1.2】cols和rows
cols 控制行数
rows控制列数
【1.3】readonly属性【不常用】
布尔属性
只能读，不能修改
<textarea name="" id="" cols="30" rows="10" readonly>你好你好</textarea>
【1.4】disabled属性【不常用】
布尔属性
表单完全禁用
<textarea name="" id="" cols="30" rows="10" disabled>你好你好</textarea>总结：readonly和disabled两个属性，添加后，文本域都不能使用更改，区别是文本框的显示效果不同。disabled使得文本框完全是灰色的
【2】其他表单
【2.1】button按钮
<button>你好</button>
<button><img src="../111.jpg" alt=""></button>按钮里面可以添加文字和图片等信息，里面的图片可以通过css样式修改。这个按钮js常用
【2.2】input type的更多属性值
【2.2.1】
文件：
<!-- 上传文件 可以加multiple -->
<input type="file" name="" id="">
地址url：
<!-- 添加地址 -->
<!-- 有表单验证，必须输入地址的形式 -->
<input type="url">颜色：
<input type="color">数字和范围：
<!-- 填写数字 -->
<input type="number" value="20" min="10" max="100" step="10">
<!-- 填写范围 -->
<input type="range" value="3" min="1" max="10" step="2">时间控件：
<!-- 填写时间 -->
<!-- date是w3c推荐的 -->
<input type="date">
<br>
<input type="month">
<br>
<input type="week">
<br>
<input type="time">
<br>ps: datetime 和 datetime-local已经不被w3c推荐
【3】表单的重要属性拓展
【3.1】autocomplete
作用：提交历史是否显示
<form action="" method="get" name="" autocomplete="on">
<input type="text" name="name">
<input type="tel" name="tel">
<input type="submit">
</form>备注：记得这里的text和tel两个表单都必须添加name属性并且给值，再没有name属性的情况下，我出现了bug无法显示过去的历史记录的情况，不知道诸位如何。
【3.2】nonvalidate
布尔属性
作用：关闭整个表单的验证
<form action="" method="get" name="" autocomplete="on" novalidate>
昵称：<input type="text" name="name">
<br>
电话：<input type="tel" name="tel">
<br>
邮件：<input type="email" name="mail">
<br>
<input type="submit">
</form>备注：
1.写在form标签里面
2.邮件email表单有专门的格式要求XXX@.com，添加这个属性以后，再次随便输入一个数，发现都能提交成功，验证取消了
【3.3】autofocus
<input type="text" autofocus>特点：布尔属性
功能：添加后打开浏览器，该表单会自动获取焦点被选中
【3.4】required
<form action="" method="get">
<input type="text" required>
<input type="submit">
</form>特点：布尔属性
功能：添加以后该表单内容不能为空，否则无法提交
【4】list datalist option的结合使用【不常用】
<input name="good" list="gooder">
<datalist id="gooder">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
</datalist>备注：datalist 的id的属性值要和input的list的属性值一致
这里的option的value属性值会在input里面的下拉菜单显示，注意这里的option 是单标签
【5】form 属性
<form action="" method="get" id="good">
<input type="text">
</form>
<input type="text" form="good">H5新增
如果要将form外的input表单归到form里面去，只需要添加一个form属性，值等于上面form表单域的id值即可
【6】select表单 optgroup
<select name="" id="">
<optgroup label="浙江省">
<option value="">温州</option>
<option value="" selected>杭州</option>
</optgroup>
<optgroup label="江西省">
<option value="">鄱阳</option>
<option value="">景德镇</option>
</optgroup>
</select>这样可以让select下拉菜单里面的选项就进行分组。
注意optgroup里面要添加值，用label属性
结尾：
学习id： 201903090124
现在是大三学生，学习到了Js的面向对象编程，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。