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
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
HTML基础知识(9)
表单标签 1.1 input系列标签 Ø 场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页 Ø 标签名:input • input标签可以通过type属性值的不同,展示……
<<上一篇
下一篇>>