【HTML系列】第五章 · 表单

写在前面

---

        Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

        如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

---

目录

写在前面

1. 表单

1.1 基本结构

1.2 常用表单控件

1.3 禁用表单控件

1.4 label 标签

1.5 fieldset 与 legend 的使用（了解）

1.6 表单总结

结语

---

【往期回顾】

【HTML系列】第四章 · 列表和表格

【HTML系列】第三章 · 图片标签和超链接

【HTML系列】第二章 · HTML基础

【HTML系列】第一章 · HTML入门

【HTML系列】前章 · HTML前序知识

---

【其他系列】

【Java基础系列】（已更新完）

---

1. 表单

---

1.1 基本结构

• 概念：一个包含交互的区域，用于收集用户提供的数据。

• 简单梳理：

• 在本小节，我们先记住表单的整体形式，稍后会对表单控件进行详细讲解。

示例代码：

    
    


    

        
        去百度搜索
    
    

    

        
        去京东搜索
    
    

    搜索手机

---

1.2 常用表单控件

① 文本输入框

• 常用属性如下：
  • name 属性：数据的名称。
  • value 属性：输入框的默认输入值。
  • maxlength 属性：输入框最大可输入长度。

② 密码输入框

• 常用属性如下：
  • name 属性：数据的名称。
  • value 属性：输入框的默认输入值（一般不用，无意义）。
  • maxlength 属性：输入框最大可输入长度。

③ 单选框

女
男

• 常用属性如下：
  • name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
  • value 属性：提交的数据值。
  • checked 属性：让该单选按钮默认选中。

④ 复选框

抽烟
喝酒
烫头

• 常用属性如下：：
  • name 属性：数据的名称。
  • value 属性：提交的数据值。
  • checked 属性：让该复选框默认选中。

⑤ 隐藏域

• 用户不可见的一个输入区域，作用是：
  • 提交表单的时候，携带一些固定的数据。
  • name 属性：指定数据的名称。
  • value 属性：指定的是真正提交的数据。

⑥ 提交按钮

点我提交表单

• 注意：
  • button 标签 type 属性的默认值是 submit 。
  • button 不要指定 name 属性
  • input 标签编写的按钮，使用 value 属性指定按钮文字。

⑦ 重置按钮

点我重置

• 注意点：
  • button 不要指定 name 属性
  • input 标签编写的按钮，使用 value 属性指定按钮文字。

⑧ 普通按钮

普通按钮

• 注意点：
  • 普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

⑨文本域

我是文本域

• 常用属性如下：
  • rows 属性：指定默认显示的行数，会影响文本域的高度。
  • cols 属性：指定默认显示的列数，会影响文本域的宽度。
  • 不能编写 type 属性，其他属性，与普通文本输入框一致。

⑩下拉框

    黑龙江
    辽宁
    吉林
    广东

• 常用属性及注意事项：
  • name 属性：指定数据的名称。
  • option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
  • option 标签设置了 selected 属性，表示默认选中。

演示代码：

    
    


    

        账户：
        
        

        密码：
        
        

        性别：
        男
        女
        

        爱好：
        玩游戏
        购物
        踢足球
        看电影
        

        其他：
        
        

        籍贯：
        
            江西
            湖南
            广东
            广西
            安徽
        
        
        

        确认
        
        重置
        
        普通按钮
        
    

---

1.3 禁用表单控件

• 给表单控件的标签设置 disabled 既可禁用表单控件。
• input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

---

1.4 label 标签

• label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与 label 关联方式如下：
  • 让 label 标签的 for 属性的值等于表单控件的 id 。
  • 把表单控件套在 label 标签的里面。

---

1.5 fieldset 与 legend 的使用（了解）

• fieldset 可以为表单控件分组、 legend 标签是分组的标题。

演示代码：

    
主要信息
    账户：
    

    
        密码：
        
    
    

    性别：
    
    男
    
        女
    

---

1.6 表单总结

---

结语

---

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力