HTML表单与表格入门教程

"11-表单与表格（1课时）.md 文件主要讲述了HTML中的表单和表格的使用，包括表单的基本结构、表单控件以及输入类型的多样性。" 在网页设计中，表单（Form）是收集用户信息的重要工具。表单通常由`<form>`标签定义，它是一个包含各种表单控件元素的区域，用于数据的输入和提交。`<form>`标签有几个关键属性： 1. `action`: 指定表单数据提交的URL地址。 2. `method`: 定义数据提交的方式，常见的有`GET`和`POST`。`GET`方式将数据附加在URL后面，通常用于查询类操作，而`POST`方式将数据隐藏在请求主体中，适合提交敏感信息。 3. `target`: 决定提交数据后新页面的打开位置，如`_blank`表示在新窗口中打开。 4. `name`: 用于识别不同的表单。 表单控件是表单的核心，它们包括各种输入元素，如`<input>`、`<select>`、`<textarea>`等。所有控件必须具有`name`属性，以便后端能够识别和处理数据。对于`<input>`标签，其`type`属性可定义不同的输入类型，例如： - `type="text"`: 创建单行文本输入框，用户可以直接输入文本。 - `type="password"`: 创建密码输入框，输入的字符会被遮罩。 - `type="radio"`: 创建单选按钮，同一组内的`name`属性必须相同，`value`属性用于区分不同的选项。 - `type="checkbox"`: 创建复选框，用户可以选择多个选项。 - `type="submit"`: 创建提交按钮，点击后会触发表单提交。 - `type="reset"`: 创建重置按钮，用于清空表单中的数据。 此外，`<select>`和`<option>`组合用于创建下拉列表，`<textarea>`用于多行文本输入。 表格（Table）是组织和展示数据的有效方式。HTML中的表格由`<table>`、`<tr>`（行）、`<td>`（单元格）和`<th>`（表头单元格）等标签组成。例如： ```html <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </table> ``` 表格还可以通过`<thead>`、`<tbody>`和`<tfoot>`标签来分隔表头、主体和页脚部分。`<colgroup>`和`<col>`用于定义列的样式和宽度，`<caption>`用于添加表格标题。 在实际应用中，表单和表格通常结合CSS和JavaScript进行美化和交互增强，例如响应式设计、验证用户输入、动态加载数据等。了解并熟练掌握表单和表格的使用是构建功能丰富的网页界面的基础。