当前位置：首页 > news >正文

【web站点安全开发】任务1：html基础表单和表格

news 2025/7/13 6:44:03

一、HTML 基础概述

二、HTML 基础表单

（一）表单的作用

（二）表单的基本结构

（三）常用表单控件

（四）表单示例

三、HTML 基础表格

（一）表格的作用

（二）表格的基本结构

（三）表格的属性

（四）单元格的合并

（五）表格示例

四、HTML 基础代码词条

CSDN 原创主页：不羁https://blog.csdn.net/2303_76492156?type=blog

一、HTML 基础概述

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它通过一系列标签来描述网页的结构和内容，这些标签通常由尖括号<和>包围，并且大多数标签都是成对出现的，由开始标签和结束标签组成，例如<p>和</p>表示一个段落。

二、HTML 基础表单

（一）表单的作用

表单在网页中主要用于收集用户输入的信息，例如用户注册、登录、提交反馈等场景，用户填写的信息会被发送到服务器进行处理。

（二）表单的基本结构

表单由<form>标签定义，其基本语法结构如下：

<form action="处理表单数据的服务器地址" method="提交方式"><!-- 表单控件 -->
</form>

action：指定处理表单数据的服务器程序的 URL 地址。如果省略该属性，表单数据将被提交到当前页面所在的 URL。

method：指定表单数据的提交方式，常用的有get和post两种。

get：默认的提交方式，表单数据会附加在 URL 后面，以?分隔 URL 和表单数据，多个数据之间用&连接。这种方式传输的数据量有限，且不安全，适用于简单的数据查询。

post：表单数据会被包含在请求体中发送给服务器，不会显示在 URL 中。这种方式传输的数据量较大，且相对安全，适用于用户注册、登录等需要提交敏感信息的场景。

（三）常用表单控件

1、文本输入框（text）：用于输入单行文本。

<input type="text" name="username" value="默认值" placeholder="提示文本" maxlength="最大长度">

name：控件的名称，用于在提交表单时标识该控件的值。
value：输入框的默认值。

placeholder：当输入框为空时显示的提示文本。

maxlength：指定输入的最大字符数。

2、密码输入框（password）：用于输入密码，输入的内容会以星号或圆点显示。

 <input type="password" name="password" maxlength="20">

3、单选按钮（radio）：用于从多个选项中选择一个。

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

name：同一组单选按钮的name属性值必须相同，这样才能保证只能选择其中一个。
value：单选按钮的值。

checked：设置该单选按钮为默认选中状态。

4、复选框（checkbox）：用于从多个选项中选择一个或多个。

<input type="checkbox" name="hobby" value="reading" checked>阅读
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="music">音乐

name：同一组复选框的name属性值通常相同。

value：复选框的值。

checked：设置该复选框为默认选中状态。

5、下拉列表（select 和 option）：用于从预设的选项中选择一个或多个。

<select name="city" multiple><option value="beijing" selected>北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option>
</select>

name：下拉列表的名称。

multiple：添加该属性后，用户可以按住 Ctrl 键选择多个选项。

<option>：每个<option>标签表示一个选项，value属性为选项的值，selected属性设置该选项为默认选中状态。

6、文本域（textarea）：用于输入多行文本。

<textarea name="message" rows="行数" cols="列数" placeholder="请输入内容..."></textarea>

name：文本域的名称。

rows：指定文本域的行数。

cols：指定文本域的列数。

placeholder：提示文本。

7、提交按钮（submit）：用于提交表单数据。

<input type="submit" value="提交">

value：按钮上显示的文本。

8、重置按钮（reset）：用于将表单中的所有控件重置为默认值。

<input type="reset" value="重置">

9、按钮（button）：普通按钮，通常需要配合 JavaScript 使用来实现自定义功能。

<input type="button" value="点击我" onclick="alert('Hello World!')">

onclick：点击按钮时触发的事件。

（四）表单示例

<form action="/submit" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username" placeholder="请输入用户名" maxlength="20"><br><br><label for="password">密码：</label><input type="password" id="password" name="password" maxlength="20"><br><br><label>性别：</label><input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女<br><br><label>爱好：</label><input type="checkbox" name="hobby" value="reading" checked>阅读<input type="checkbox" name="hobby" value="sports">运动<input type="checkbox" name="hobby" value="music">音乐<br><br><label for="city">城市：</label><select name="city" id="city"><option value="beijing" selected>北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><br><label for="message">留言：</label><br><textarea name="message" id="message" rows="5" cols="30" placeholder="请输入留言内容..."></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置">
</form>

<label>标签：用于为表单控件定义标签，for属性的值与相关控件的id属性值相同，这样点击标签时，对应的控件会获得焦点，提高用户体验。