表单域

表单标签

使用表达的目的收集用户信息。

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息

三部分构成。

表单域

表单域是一个包含单元素的区域。在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。会把他范围内的表单元信息提交给服务器。

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

表单控件
  1. input输入表单元素

在表单元素中input标签用于收集用户信息。在此标签中包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

<input type="属性值"/>
 <from>
     <!-- text 文本框 用户可以在里面输入任何文字 placeholder="请输入名字" 对比value 文字颜色较浅，输入文字自动消失-->
        姓名：<input type="text" name="username" value="请输入名字"> <br>
        <!-- password 密码框 用户看不见输入的密码 -->
        密码：<input type="password" name="pwd"> <br>
        <!-- radio 单选按钮 可以实现多选一 -->
        <!-- name 是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        性别：男<input type="radio" name="sex"> 女 <input type="radio" name="sex"> <br>
        <!-- checkbox 多选按钮 可以实现多选 -->
        爱好：吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 发呆 <input type="checkbox"> <br>
     <!-- 单选按钮和复选框可以设置checked 属性，当页面打开时默认选中这个按钮 -->
        <input type="checkbox" checked="checked">我同意注册条款
</from>

  1. name和value是每个表单元元素都有的属性，主要给后台人员使用。
  2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
  3. checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。
  4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。
label标签

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

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

select表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用

posted @ 2022-01-03 15:10  Last_Knight  阅读(407)  评论(0)    收藏  举报