html 表单(二) textarea、button,autocomplete autofocus属性

目录

1.textarea 文本框控件

【1.1】resize: none

【1.2】cols和rows 

【1.3】readonly属性【不常用】

【1.4】disabled属性【不常用】

【2】其他表单

【2.1】button按钮

【2.2】input type的更多属性值

【2.2.1】

【3】表单的重要属性拓展

【3.1】autocomplete

【3.2】nonvalidate

【3.3】autofocus

【3.4】required

【4】list datalist option的结合使用【不常用】

【5】form 属性

【6】select表单 optgroup


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的面向对象编程,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。

上一篇:使用 dumi 打包 React 组件库并生成文档站点


下一篇:android --一个简单的登录界面