HTML学习笔记——表单

238 阅读2分钟

表单标签

表单组成: 一个完整的表单通常有表单域,表单空间(表单元素)和提升信息3个部分构成。

表单组成.jpeg

表单域

表单域是一个包含表单元素的区域。 其中,<form>标签用于定义单域,已实现用户信息的收集和传递。 <form>会把他范围内的表单元素信息交给服务器

<form action="url地址"method="提交方式"name="表单域名称">
各种表单元素控件
</form>
表单元素(表单空间)

<input>表单元素:用于收集用户信息。 在<input>标签中,包含type属性,根据不同的type属性值,输入的字段用于很多种形式(如文本字段,复选框,掩码后的文字控件,按钮等).

如:<input type="属性值">

<input>标签为单标签 type属性设置不同的属性值用来指定不同的控件类型。

微信图片_20220309153632.jpg

除type外,<input>标签还有很多属性,如:

属性属性值描述
name由用户自定义定义input元素的名称(用于区别不同表单)
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载是应被选中(页面打开时被默认选中)
maxlength正整数规定输入字段中字符最大长度(一般用于限制用户名长度)

<label>标签

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

<laber for="sex"></label>
<input type="radio" name="sex" id="sex">
  <!-- 核心:<label>标签的for属性应当与相关元素的id属性相同。-->

<select>表单元素

在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们使用<select>标签空间定义下拉列表。

籍贯: <select>
<option>广西</option>
<option>山西</option>
<option>陕西</option>
<option>江西</option>
       </select>

  1. <select>至少包含一组<option>
  2. <option>种定义selected="selected"时,当前项即为默认选项。
<option selected="selected">江西</option>

<textarea>表单元素

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

<textarea rows="3" cols="20"> 
文本内容
</textarea>
  1. 通过<textarea>标签可以轻松创建多行文本输入框。
  2. cols="每行中的字符数",rows="显示的行数"(一般不使用,会用css来改变大小)。