CSS表单标签（下）

二,input系列按钮标签:

场景：在网页中显示不同功能的按钮表单控件

1,form标签 表单域

​ 如果需要实现以上按钮功能，需要配合form标签使用

​ form使用方法：用form标签把表单标签一起包裹起来即可;

2,action 提交属性的地址

3,submit reset

默认名字为提交

点击之后将数据提交给后端服务器;

reset默认名字为重置 点击之后恢复表单默认值;

button默认没有名字 默认无功能,之后配合js使用;

4,value修改名称

只需要添加value属性重命名标题,重新为submit,reset,button命名

5,name 属性

规定 input 元素的名称,属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

<form action="">
        账号<input type="text" name="username" id="" placeholder="请输入账号">
        <br>
        密码<input type="password" placeholder="请输入密码" name="mima">
        <br>
        <input type="submit" value="提交">
        <br>
        <input type="reset" value="重置">
        <br>
        <input type="button" value="普通按钮">
    </form>

实现效果：

三, button 按钮标签

场景:在网页中显示用户点击的按钮;

​ 1,button标签是双标签，更便于包裹其他内容：文字、图片等

​ 2,同样具有submit,reset,button三个属性,与input>type的三个属性相同;

​ 3,同样需要在表单域内生效;

<form action="">
        <br>
        账号<input type="text" name="username" id="" placeholder="请输入账号">
        <br>
        密码<input type="password" placeholder="请输入密码" name="mima">
        <br>
        <button type="submit">提交按钮</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮,无任何功能</button>
    </form>

实现效果：

四，select下拉菜单标签

格式：

列表数据

场景：在网页中提供多个选择项的下拉菜单表单控件;

常见属性：

optgroup:可以给option标签添加一个optgroup来给下拉列表分类

value: 属性中的值是表单被提交时被发送到服务器的值。

select标签：下拉菜单的整体;

option标签：下拉菜单的每一项;

selected：下拉菜单的默认选中

默认值为第一个option选项;

快捷写法:

select>option*3

<select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="" selected>深圳</option>
    </select>

实现效果：

五,text area文本域标签

场景：在网页中提供可输入多行文本的表单控件;

常见属性: rows：规定了文本域内可见行数; 和表格跨行合并类似 cols：规定了文本域内可见宽度;

注意点:右下角可以拖拽改变大小 实际开发时针对于样式效果推荐用CSS设置

<textarea name="" id="" cols="20" rows="10"></textarea>

实现效果：

六,label标签

场景：常用于绑定内容与表单标签的关系;

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。 如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<input type="radio" name="gender" id="nan"><label for="nan">男</label>

使用方法①：

1. 使用label标签把内容（如：文本）包裹起来

2. 在表单标签上添加id属性

3. 在label标签的for属性中设置对应的id属性值

4. name:让单选框成为相同的一组