html 表单(二) textarea、button,autocomplete autofocus属性
作者:互联网
目录
【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的面向对象编程,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。
标签:textarea,form,button,文本框,表单,autocomplete,添加,input,属性 来源: https://blog.csdn.net/hangshao_123/article/details/120634223