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>
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/32.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论