1-4 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常用

type: button | reset | submit 三种类型。  button是普通按钮 reset是充值按钮 submit是提交按钮

disabled 是布尔属性，直接写这个单词即可，表示表单被禁用

【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-2

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。