title: HTML学习笔记(3)——表单
author: SpringForest
date: 2021/05/25
updated: 2021/05/29
categories: HTML学习记录

应用场景

收集信息

表单的组成

  • 表单域
  • 表单控件
  • 提示信息

表单域

包含表单元素的区域，会将内部的表单信息提交给服务器（划分一块区域给表单）

<from action="url地址" methof="提交方式" name="表单域名称">
  表单元素
</from>

表单控件（表单元素）

  • input输入元素
  • select下拉元素
  • textarea文本域元素

input

  • 用于接收用户输入的信息
  • < input/>是单标签
  • type属性设置不同的属性值来指定不同的控件类型
<input type="属性值"/>

type属性值表

属性值 描述
button 定义可点击按钮（一般通过JavaScript启动脚本）如发送验证码
checkbox 定义多选框（复选框）
file 定义输入字段和浏览按钮——文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段——输入的内容会被隐藏
radio 定义单选按钮（name值相同的多个单选按钮才能实现但与单选）
reset 定义重制按钮，清除表单内的所有数据
submit 定义提交按钮
text 定义单行的输入字段，默认20字符宽度
name 定义input元素的名称
value input元素默认填入的值
checked 此元素默认选中
maxlength 输入字符的最大长度

label标签

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

<label for="对应元素id">直接输出的文字</label>
<input type="radio" name="元素名字" id="元素id"/>

select下拉表单

<select>
  <option>选项1</option>
  <option>选项2</option>
</select>
  • 在option中定义selected=“selected”时该选项为默认选项

textarea文本域

供用户输入多行内容

<textarea rows="显示的行数" clos="每行的字符数">
</textarea>