文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-14 18:23

关注

目录

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

2.1 Action 属性

  1. 背景：通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
  2. 作用：规定当提交表单时向何处发送表单数据。action 默认值为当前页面。
  3. 语法：
    。
  4. 关于URL值：
    1. 默认值为当前页面。
    2. 绝对 URL：指向另一个网站（比如 action=“http://www.example.com/example.htm”）。
    3. 相对 URL：指向网站内的一个文件（比如 action=“example.htm”）。

2.2 Target 属性

  1. 背景：当我们提交表单后，一般会得到对应的响应。
  2. 作用：规定一个关键词，指示在何处显示提交表单后接收到的响应。
  3. 语法：
  4. 关于target几种属性的含义：
    1. _blank：在新窗口/选项卡中打开。
    2. _self：在同一框架中打开。（默认）
    3. _parent：在父框架中打开。
    4. _top：在整个窗口中打开。
    5. framename：在指定的 iframe 中打开。
  5. 在网站https://www.runoob.com/try/try.php?filename=tryhtml_form_target练习不同target的响应方式，以加深理解。

2.3 Method 属性

  1. 作用：指定提交表单数据时要使用的 HTTP 方法。
  2. 使用get方式（默认）语法：
    使用post方式语法：
  3. 两种方法的一个明显区别是，get提交的参数在浏览器的地址栏中可见，而post则不可见。如果表单数据包含敏感信息或个人信息，请务必使用 POST！
  4. 关于 GET 的注意事项：
    • 以名称/值对的形式将表单数据追加到 URL
    • 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
    • URL 的长度受到限制（2048 个字符）
    • 对于用户希望将结果添加为书签的表单提交很有用
    • GET 适用于非安全数据，例如 Google 中的查询字符串
  5. 关于 POST 的注意事项：
    • 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
    • POST 没有大小限制，可用于发送大量数据。
    • 带有 POST 的表单提交无法添加书签

2.4 enctype 属性

  1. 注意：只有 method=“post” 时才使用 enctype 属性。
  2. 作用：规定在将表单数据发送到服务器之前如何对其进行编码。
  3. 语法：
  4. 属性值：
    1. application/x-www-form-urlencoded：在发送前编码所有字符（默认）。
    2. multipart/form-data：不对字符编码；在使用包含文件上传控件的表单时，必须使用该值。
    3. text/plain：空格转换为 “+” 加号，但不对特殊字符编码。

2.5 name 属性

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

2.6 Autocomplete 属性

  1. 作用：设定表单是否应打开自动完成功能，启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。部分浏览器不支持。
  2. 语法：
  3. 属性值及含义：
    1. on：默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。
    2. off：规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。
  4. 在网站https://www.runoob.com/try/try.php?filename=tryhtml5_form_autocomplete尝试不同属性值的输入方法，在搜狗浏览器体现不错差别，在360浏览器可以体现出。

2.7 Novalidate 属性

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

3.1 input元素

  1. 作用：元素在 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。
  2. 注意：该元素是单标签。
  3. 常用属性：
    1. name属性：类型为text，该属性规定元素的名称。
    2. pattern属性：类型为regexp，该属性用于设定验证元素值的正则表达式。
    3. size属性：类型为number，该属性规定以字符数计的元素的可见宽度。
    4. type属性：该属性设定要显示的元素的类型。
    5. 更多属性参考网址：《HTML标签》
  4. 利用菜鸟在线编辑器尝试不同type值的应用结果。先清空源代码，然后复制黏贴代码并点击运行。
<form>账号：<input type="text" name="fname"><br >密码：<input type="password" name="passwd"><br >按钮：<input type="button" name="button"><br >性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br >爱好：<input type="checkbox" name="ah1">吃饭<input type="checkbox" name="ah2">睡觉<input type="checkbox" name="ah3">打游戏form>

3.2 select元素和option元素

  1. 作用： 元素常用属性：
    1. 语法：标签》
  3. 在网站菜鸟在线编辑器练习不同属性的作用。

3.3 textarea元素

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