365bet客服电话

【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）

📅 2025-08-24 11:08:49 👤 admin 👁️ 115 ❤️ 303
【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）

目录

1 form表单概述2 表单属性2.1 Action 属性2.2 Target 属性2.3 Method 属性2.4 enctype 属性2.5 name 属性2.6 Autocomplete 属性2.7 Novalidate 属性

3 表单元素3.1 input元素3.2 select元素和option元素3.3 textarea元素3.4 button元素3.5 optgroup元素3.6 fieldset元素与legend元素3.7 datalist元素

4 总结参考文献

1 form表单概述

作用：用于搜集不同类型的用户输入。应用场合：搜索框、登录框、文件上传、注册、留言板等。定义标签：

2 表单属性

2.1 Action 属性

背景：通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。作用：规定当提交表单时向何处发送表单数据。action 默认值为当前页面。语法：

。关于URL值：

默认值为当前页面。绝对 URL：指向另一个网站（比如 action=“http://www.example.com/example.htm”）。相对 URL：指向网站内的一个文件（比如 action=“example.htm”）。

2.2 Target 属性

背景：当我们提交表单后，一般会得到对应的响应。作用：规定一个关键词，指示在何处显示提交表单后接收到的响应。语法：

关于target几种属性的含义：

_blank：在新窗口/选项卡中打开。_self：在同一框架中打开。（默认）_parent：在父框架中打开。_top：在整个窗口中打开。framename：在指定的 iframe 中打开。 在网站https://www.runoob.com/try/try.php?filename=tryhtml_form_target练习不同target的响应方式，以加深理解。

2.3 Method 属性

作用：指定提交表单数据时要使用的 HTTP 方法。使用get方式（默认）语法： 使用post方式语法：两种方法的一个明显区别是，get提交的参数在浏览器的地址栏中可见，而post则不可见。如果表单数据包含敏感信息或个人信息，请务必使用 POST！关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）URL 的长度受到限制（2048 个字符）对于用户希望将结果添加为书签的表单提交很有用GET 适用于非安全数据，例如 Google 中的查询字符串 关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）POST 没有大小限制，可用于发送大量数据。带有 POST 的表单提交无法添加书签

2.4 enctype 属性

注意：只有 method=“post” 时才使用 enctype 属性。作用：规定在将表单数据发送到服务器之前如何对其进行编码。语法：属性值：

application/x-www-form-urlencoded：在发送前编码所有字符（默认）。multipart/form-data：不对字符编码；在使用包含文件上传控件的表单时，必须使用该值。text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

2.5 name 属性

作用：规定表单的名称。name属性用于在JavaScript中引用元素，或者在表单提交之后引用表单数据。语法：

2.6 Autocomplete 属性

作用：设定表单是否应打开自动完成功能，启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。部分浏览器不支持。语法：属性值及含义：

on：默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。off：规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。 在网站https://www.runoob.com/try/try.php?filename=tryhtml5_form_autocomplete尝试不同属性值的输入方法，在搜狗浏览器体现不错差别，在360浏览器可以体现出。

2.7 Novalidate 属性

作用：novalidate 属性规定当提交表单时不对表单数据（输入）进行验证。属性：novalidate 属性是一个布尔属性。语法：

3 表单元素

3.1 input元素

作用：元素在 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。注意：该元素是单标签。常用属性：

name属性：类型为text，该属性规定元素的名称。pattern属性：类型为regexp，该属性用于设定验证元素值的正则表达式。size属性：类型为number，该属性规定以字符数计的元素的可见宽度。type属性：该属性设定要显示的元素的类型。更多属性参考网址：《HTML标签》 利用菜鸟在线编辑器尝试不同type值的应用结果。先清空源代码，然后复制黏贴代码并点击运行。

账号：

密码：

[an error occurred while processing the directive]

按钮：

[an error occurred while processing the directive]

性别：男女

[an error occurred while processing the directive]

爱好：吃饭

睡觉

打游戏

3.2 select元素和option元素

作用： 元素常用属性：

语法：标签》

语法：

3.3 textarea元素

作用：定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。注意：可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。语法：