HTML表单元素

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

三、textarea 表单元素

1、使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签
2、在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

3、使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法:

<textarea rows="3 ols="20">
文本内容
</textarea>

通过<textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数”，rows=“显示的行数”。

我们在实际开发中不会使用，都是用 CSS 来改变大小。

表单元素我们学习了三大组input 输入表单元素select 下拉表单元素 textarea 文本域表单元素这三组表单元素都应该包含在form表单域里面并且有 name 属性。

具体代码:

<form>
     <input type=“text " name="username”>
         <select name=“jiguan”>
         <option>北京</option>
         </select>
     <textarea name= "message">
     </textarea>
</form>

有三个名字非常相似的标签

表单域form，使用场景: 提交区域内表单元素给后台服务器

文件域file，是input type 属性值，使用场景:上传文件

文本域textarea，使用场景: 可以输入多行文字,比如留言板、网站介绍等