HTML基础知识（9）

表单标签

1.1 input系列标签

Ø 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
Ø 标签名：input
• input标签可以通过type属性值的不同，展示不同效果
Ø type属性值

1.1.2input标签-文本框

Ø 场景：在网页中显示输入单行文本的表单控件
Ø type属性值：text
Ø 常用属性：placeholder

代码：

<input type="text" placeholder="输入框显示内容">

 value属性和name属性的作用介绍

Ø value属性：用户输入的内容，提交之后会发送给后端服务器
Ø name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
Ø 后端接收到数据的格式是：name的属性值 = value的属性值

1.1.3 input系列标签-密码框

Ø 场景：在网页中显示输入密码的表单控件
Ø type属性值：password
Ø 常用属性（同文本框）:

Ø 注意点：
• type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框

1.1.4 input系列标签-单选

Ø 场景：在网页中显示多选一的单选表单控件
Ø type属性值：radio
Ø 常用属性

Ø 注意点：
• name属性对于单选框有分组功能
• name的属性值一样是，成为单选选项

input单选时添加checked为默认选择项

代码：

  性别：<input type="radio" name="sex">男 
    <input type="radio" name="sex" checked>女

1.1.5 input系列标签-复选框

Ø 场景：在网页中显示多选多的多选表单控件
Ø type属性值：checkbox
Ø 常用属性（同单选框）

代码：

<input teyp="checkbox" checked>

1.1.6input系列标签-文件选择

Ø 场景：在网页中显示文件选择的表单控件
Ø type属性值：file
Ø 常用属性

代码：

<input type="file" multiple>

1.1.7 input系列标签-按钮

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

Ø 注意点：
• 如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可

from为父级标签包裹需要做的input表单

代码：

<form action="">
        用户名： <input type="text">
   <br>
   <br>
   密码：<input type="password" name="" id="">
   <br>
   <br>
   <input type="submit" value=”按钮标题“>
   <input type="reset">
   <input type="button" value=”按钮标题“>
</form>