HTML学习笔记——表单

Posted 2021-06-06 UDK_KL.

---

目录

• 应用场景
• 表单的组成
• 表单域
• 表单控件（表单元素）
• • input
  • • type属性值表
  • label标签
  • select下拉表单
  • textarea文本域

---

应用场景

收集信息

表单的组成

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

表单域

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

<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>

(完结)