本帖最后由 仙女姥姥. 于 2020-3-1 22:12 编辑
使用表单目的是为了收集用户信息。在网页中,需要跟用户进行交互,收集用户资料,此时就需要表单。
在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。
表单域是一个包含表单元素的区域。在 HTML 标签中,<form>标签用于定义表单域,以实现用户信息的收集和传递,<form>会把它范围内的表单元素信息提交给服务器。<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性:
属性 | 属性值 | 作用 | action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 | method | get/post | 用于设置表单数据的提交方式 | name | 名称 | 用于指定表单的名称,以区分同一个页面的多个表单域 | 注意:写表单元素之前,必须有个表单域<form>进行包含.
<input>表单元素 (重点)
表单元素中 <input> 标签用于收集用户信息。
在 <input>标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
<input type="属性值" />
属性值 | 描述 | button | 普通按钮 | checkbox | 复选框,多选框 | file | 文件域 | password | 密码框 | radio | 单选框 | submit | 提交按钮 | text | 文本框 | reset | 重置按钮 | 除 type 属性外,<input>标签还有其他很多属性
属性 | 属性值 | 描述 | name | 用户自定义 | 定义input元素的名称 | value | 用户自定义 | 规定input元素的值 | checked | checked | 规定此input元素首次加载时应当被选中 | maxlength | 正整数 | 规定输入字段中的字符的最大长度 | 1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
4. maxlength 是用户可以在表单元素输入的最大字符数, 较少使用.
<input>总结:
1、<input />标签为单标签
2、type 属性设置不同的属性值用来指定不同的控件类型
文本输入表单:用户用于输入文本信息
<input type="text" />
注意:设置value值可以是输入框的默认提示内容
密码框:能够隐藏明文密码,相对安全
<input type="password" />
注意:设置value值可以是输入框的默认密码
单选按钮组:用户用于单选某一项
<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女
注意:
1、想要设置单选,必须要让按钮组内的name值保持一致
2、checked设置默认选中项
复选按钮组:用户用于多项选择
<input type="checkbox" name="hobby" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="volleyball"/>排球
注意:
1、按钮组内的name值保持一致。
2、value值不同(理解)
3、checked设置默认选中项
<label>标签 :<label>标签为 input 元素定义标注(标签)。<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
说明:<label>标签的 for 属性应当与相关元素的 id 属性相同。
<select>表单元素
使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下 拉列表。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
说明:
1、<select>中至少包含一对<option>
2、在<option>中定义selected="selected"时,当前项即为默认选中项
<textarea>表单元素
使用场景:当用户输入内容较多的情况下,就不能使用文本框表单了,可以使用<textarea>标签。 表单元素中,<textarea>标签是用于定义多行文本输入的控件。 使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论等。
<textarea rows="3" cols="20">
文本内容
</textarea>
说明:
1、通过<textarea>标签可以轻松的创建多行文本输入框
2、cols="每行中的字符数",rows="显示的行数"。在实际开发中不会使用,都会使用css来控制大小。
|
|