03 form 表单

form 表单

功能:

表单主要用来获取用户的输入信息,然后组织信息传输给服务器,实现用户与服务器的交互

表单主要有以下属性:

属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

input标签:设置各种框获取输入信息

功能:

用于设置输入框、单选框、复选框、按钮、文本选择框

属性:

input标签会根据不同的type属性变化成多种形态

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框
date 日期输入框
checkbox 复选框
radio 单选框
submit 提交按钮
reset 重置按钮
button 普通按钮
hidden 隐藏输入框
file 文本选择框

属性说明:

  • name:表单提交时的“键”,注意和id的区别
  • value:表单提交时对应项的”值“
    • type="button", "reset", "submit"时,为按钮上显示的文本内容
    • type="text","password","hidden"时,为输入框的初始值
    • type="checkbox", "radio", "file",为输入相关联的值
  • checked:radio和checkbox默认被选中的项
  • readonly:text和password设置只读。能看到,也会提交
  • disabled:禁用。所有input均适用。能看到,但不会提交

readonly 和 disabled的区别

select标签:设置下拉菜单

功能:

用于设置下拉菜单

属性说明:

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

label标签:为 input 元素定义标注(标记)

功能:

说明:

  1. label 元素不会向用户呈现任何特殊效果。

textarea标签:获取多行文本,得到大段字符

功能:

用于获取多行文本,得到大段字符

属性说明:

  • name:名称
  • rows:行数
  • cols:列数
  • disabled:禁用

补充:
可以提交数据的标签有两个
input标签(当其type = submit时)
button标签(注意,时标签,不是input的type属性值)

posted @ 2019-11-14 19:48  AllenCH  阅读(127)  评论(0编辑  收藏  举报