表单系列标签
表单的目的是收集用户信息
注册页面
有一种生物叫做后端
input (输入框系列) 基本表单控件
先简单的过一遍~
<input type="text">
单标签、type:用于指定不同的控件类型
文本框 text 、 密码框 password
昵称:<input type="text" value="小姐姐" name="nicheng" maxlength="6">
密码:<input type="password" name="password" maxlength="6">
注意:
-
value :用户输入的值(提前在标签设置好就是默认值)
-
name :告诉后端对应的值的含义。后端接收到的格式:
name的属性值=value的属性值
拓展:页面中的信息需要传给后台服务器,但是直接发一个值(value)过去,后端不知道是什么,所以需要加上一个属性name 代表数据的含义。
后端接收的数据结构为: name属性值=value属性值 这样后端就知道传过去的是什么
-
maxlength:设置表单的最大输入值
小bug :如果是密码输入框,type="password"
的password不能拼错且后面不能有空格,否则浏览器会认为type属性设置无效,会以默认的text方式显示,此时不会密文,相当于是文本框。
单选框 radio 、多选框 checkbox
单选框 radio
性别 : <input name="sex" type="radio" value="nan"> 男
<input name="sex" type="radio" value="nv" checked> 女
注意:
- 通过name进行分组(有相同name属性值的单选框是一组的,一组中同时只能有一个选中),并且告诉后台传的是什么
- 在实际工作中,需要写value值
- checked 属性设置默认选中,属性值省略。
多选框 checkbox
爱好:<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="nosleep" checked>熬夜
<input type="checkbox" name="hobby" value="game">玩游戏
- 通过name进行分组,并且告诉后台传的是什么
- 需要写value值
- checked属性设置默认选中,属性值省略
文件选择框 file
<input type="file"> 单文件上传
<input type="file" multiple> 多文件上传
注意:
- multiple设置一次同时可以选中多个文件(ctrl+选中/鼠标框选)属性值可以省略
- 现在html只负责结构,之后真正的上传相关功能通过js来实现
表单按钮
需要配合form表单一起使用
说白了就是用form标签把表单标签都包起来~
提交按钮submit
将表单的内容提交给后端
<input type="submit">
重置按钮reset
将表单的内容重置为默认值
<input type="reset">
普通按钮button
之后配合js使用
<input type="button"> // 配合后面的js使用
图片按钮image
功能相当于提交按钮,样式为一张图片
<input type="image" src="a.jpg">
select 下拉菜单
出生年月:<select name="year">
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999" selected>1999</option>
</select>
注意:
- name属性设置在select标签上(告诉后台传过去的是什么)
- value属性设置在option上,表示选中的值
- selected属性设置默认选中,属性值省略
textarea文本域
用于输入大段文字
<textarea cols="规定文本区内的可见宽度" rows="规定文本区内的可见行数">
文本内容
</textarea>
**注意:**不能通过设置value使文本域有默认值,无效!
Form 表单域
form标签用于定义表单域,将各种表单包裹起来,用于表单提交
<form action="url地址">
各种表单控件
</form>
**属性:**action 用于指定处理请求的服务器URL地址
label 标签
示例 : 新浪网页注册
作用:让文本和表单元素绑定到一起(结拜兄弟)
用法:
- 写 for ,值为 id,规定 label 与哪个表单元素绑定
性别 :
<input id="nan" name="sex" type="radio"> <label for="nan">男</label>
<input id="nv" name="sex" type="radio"> <label for="id名">女</label>
步骤:
1.在表单元素上添加id属性
2.给label添加for属性,for的属性值与对应表单元素的id值相同即可
- 不写 for,默认绑定 label 内的表单控件
<label><input type="radio" name="sex"> 男</label>
步骤:用label把表单元素和文字包在一起即可
没有语义的布局标签
div和span是没有语义的标签,一般用于页面布局使用(项目中会经常使用到)
div:div盒子
<div>长亭外</div><div>古道边</div>
特点:
- width由屏幕宽度决定(独占一行)height自适应(由内容撑开)
- 默认占一整行(一行只能显示一个)
页面布局中用的最多~
span
<span>芳草碧连天</span>
特点:
- width、height由内容来决定(都由内容撑开)
- 一行里面可以显示多个
除了没有语义的标签可以用于布局,还有一些有语义的标签可以用于布局
其他表单新属性(记忆)
用法 | 属性 | 含义 |
---|---|---|
<input type="text" placeholder="请输入用户名"> | placeholder | 提示用户输入对应的信息 |
<input type="text" autofocus> | autofocus | 自动获得焦点 |
<input type="file" multiple> | multiple | 多文件上传,可选多文件 |