表单标签 #

学习HTML中的表单标签及其相关属性HTML表单指南 - 学习 Web 开发 | MDN (mozilla.org)

表单用来收集用户信息

组成

• 表单域
• 表单控件（表单元素）
• 提示信息

表单域 #

表单域 是一个 包含表单元素的区域

<form></form> 标签用于定义表单域，以实现用户信息的收集和传递

form 会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式get/post" name="表单域名称">
    各种表单控件
</form>

表单控件（表单元素） #

input 收集用户信息 #

<intput type="属性值" name="" value="" checked="checked" maxlength=""/>

注意

1. name和value每个表单都有的属性值，主要给后台人员使用
2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
3. checked 针对单选、复选 打开页面默认选中某个元素

新增的input类型

label 标注/标签 #

绑定一个表单元素，当点击label标签内文本时，浏览器自动将光标转到或选择对应的表单元素上，用来增加用户体验

<label>标签的for属性应与对应表单id属性相同

<label for="sex">男</lable>
<input type="radio" name="sex" id="sex" /> 

button 标签 #

<button type="submit">Send your message</button>

submit 提交表单 reset 重置表单 button 没有行为

select下拉表单元素 #

<select>
    <option selectd="selected">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

注意

1. select里至少有一个option
2. option中定义selectd="selected"，当前项为默认项

textarea文本域元素 #

多行文本输入（留言板、评论）

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

row：行数 cols：每行字符数

开发中使用CSS来改变大小

• IE9+以上版本才支持

新增的表单属性

修改placehoder里的颜色

input::placeholder {
    color: pink;
}

Contributors #

winter wang