html+CSS基础到高级(七)input表单标签

一、input系列标签

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页。
标签名：input。
　　input标签可以通过type属性值的不同，展示不同效果。
type属性值：
　　标签名， type属性值 说明。
　　input， text，文本框，用于输入单行文本。
　　input， password，密码框，用于输入密码。
　　input ，radio， 单选框，用于多选一。
　　input ， checkbox，多选框，用于多选多。
　　input，file，文件选择，用于之后上传文件。
　　input，submit，提交按钮，用于提交。
　　input，reste， 重置按钮，用于重置。
　　input，button，普通按钮，默认无功能，配合js添加功能。

　　1.1 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件
type属性值：text。
常用属性：
　　属性名 ， 说明。
　　placeholder： 占位符。提示用户输入内容的文本。
　　示例：

 

<input type="text" placeholder="请输入用户名">

 

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

　　1.2 input系列标签-密码框

场景：在网页中显示输入密码的表单控件。
type属性值：password。
常用属性（同文本框）：
属性名 ， 说明。
placeholder： 占位符。提示用户输入内容的文本。

示例：

<input type="password" placeholder="请输入密码">

 

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

　　1.3 input系列标签-单选框

场景：在网页中显示多选一的单选表单控件。
type属性值：radio。
常用属性：
属性名， 说明。
　　name ，分组。有相同name属性值的单选框为一组，一组中同事只能有一个被选中。
　　checked，默认选中。
示例：

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

 

注意：
name属性对于单选框有分组功能。
有相同name属性值的单选框为一组，一组中只能同时有一个被选中。

　　1.4 input系列标签-复选框

场景：在网页中显示多选多的多选表单控件。
type属性值：checkbox。
常用属性：
属性名， 说明。
checked，默认选中。

示例：

<input type="checkbox" checked>

 

　　1.5 input系列标签-文件选择

场景：在网页中显示文件选择的表单控件。
type属性值：file。
常用属性：
属性名 ， 说明。
multiple ，多文件选择。
示例：

<input type="file" multiple>

 

　　1.6 input系列标签-按钮

场景：在网页中显示不同功能的按钮表单控件。
type属性值：
　　标签名， type属性值 说明。
　　input ，submit，提交按钮。点击之后提交数据给后端服务器。
　　input ，reset，重置按钮。点击之后恢复表单默认值。
　　input ，button，普通按钮。默认无功能，之后配合js添加功能。
示例：

<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">

 

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

　　二、 button按钮标签

　　2.1 button按钮标签

场景：在网页中显示用户点击的按钮。
标签名：button。
type属性值：
　　标签名， type属性值 说明。
　　button ，submit，提交按钮。点击之后提交数据给后端服务器。
　　button ，reset，重置按钮。点击之后恢复表单默认值。
　　button ，button，普通按钮。默认无功能，之后配合js添加功能。
示例：

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>

 

注意：
谷歌浏览器中button默认是提交按钮。
button标签是双标签，更便于包裹其他内容：文字、图片等。