Day 04 HTML<表单标签>

表单标签主要功用是用来收集使用者资料

常用情况 : 注册页面...

主要由 表单域、表单元素、提示文字 这三种内容组成

以MOMO注册页面为范例:

1.表单域

表单域标签
<form action="url"地址 method="提交方式(分为get & post)" name="表单名称">
各种表单元素以及提示文字(表单内容)
</form>

2.表单元素

主要分为三种表单元素:

<input> : 输入类型表单元素
<select> : 下拉类型表单元素
<textarea> : 文本域表单元素

a. input 输入类型表单元素

<input>标签用於收集用户信息

input标签後面会包含一个type属性

根据type属性不同有不同种的形式

(文本字段,复选框,单选按钮,按钮等) (以上为单标签)

type属性:

button 定义可点击按钮
checkbox 定义复选框
file 定义上传文件
hidden 定义隐藏的输入字段
image 定义上传图片
password 定义密码输入字段(输入的内容会被隐藏)
radio 定义单选按钮
reset 定义重制按钮 (点击後清除表单中的数据)
submit 定义提交按钮 (点击後把表单数据送到服务器中)
text 定义单行的输入字段 (默认宽度为20字符)

除了type属性外，input标签後常包含的其他属性:

name 属性 : 定义input元素的名称
value 属性 : 规定input元素的值
checked 属性 : 规定input元素加载网页时应被选中
maxlength 属性 :  规定输入字段的字符最大长度

备注 :
1.name 和 value 是美的表单元素都有的属性值，主要给後端人员使用
2.name表单元素的名子，要求单选按钮和复选框需要有相同的name值
3.单选框和复选框可以设置checked属性，当页面打开时就可以默认选中
ex: checked = checked

<label>标签

使用场景:

<label>标签用於绑定一个表单元素 当点击<label>标签内文本时

浏览器就会自动转到或选择对应的表单元素以增加用户体验

<label for = "sex">男</label>
<input type="radio" name = "sex" id = "sex">
核心 : <label>标签的for属性应当= 相关元素的id属性

input表单标签codepen

b. select 下拉表单元素

如果有多个选项让用户选择并想要节约页面空间时

使用<select>定义下拉列表

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

备注 :

1. <select>中至少包含一对<option>
2. 在<option>中定义 selected = "selected"时当前项为默认选中项

下拉表单

c. textarea 文本域元素

当需要用户输入内容较多时使用<textarea>标签

<textarea>是用於定义多行文本输入的控件

常见用於留言板.评论区

<textarea rows="3" cols="20">
文本内容
</textarea>

备注:

1. 通过<textarea>标签可以轻松的创建多行文本输入框
2. cols = "每行中的字符数" rows = "显示的行数"

(但在实际中较少使用，都是使用CSS来改变大小)

文本域表单