举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > html表单属性有哪些 HTML 表单属性

html表单属性有哪些 HTML 表单属性

2023-03-17 14:18 HTML教程

html表单属性有哪些 HTML 表单属性

html表单属性有哪些

HTML表单属性是指在HTML表单中使用的属性,它们可以帮助我们更好地控制表单的外观和行为。HTML表单属性可以分为三类:元素属性、元素事件和元素样式。

1. 元素属性:
    a. action:定义表单数据发送到何处。 
    b. method:定义如何发送表单数据。 
    c. enctype:定义在发送到服务器之前如何对表单数据进行编码。 
    d. name:定义一个名字来识别该元素。 
    e. target:定义在何处显示服务器的相应内容。 
    f. accept-charset:定义浏览器可以接受的字符集。 
2. 元素事件: 
    a. onfocus:当元素获得焦点时被触发的事件。 
    b. onblur:当元素失去焦点时被触发的事件。 
    c. onchange:当元素内容改变时被触发的事件。 
3. 元素样式:  
    a. size: 表单文本字段的默认大小(默认为20)  
    b. maxlength: 表单文本字段中能够包含的最大字数  
    c. readonly: 是否将文本字段标识为“readonly”  

HTML 表单属性

HTML 表单属性

HTML表单属性

Form autocomplete

有时候你不想让浏览器自动填写表单。我们可以使用 form 元素中的 autocomplete 属性来控制这个。

autocomplete 属性有两个允许值:on和 off 。

on 值允许浏览器填写表单,并且是默认值。

以下代码显示了如何使用表单元素上的 autocomplete 属性。

<!DOCTYPE HTML>
<html>
<body>
  <form autocomplete="off" 
        method="post" 
        action="http://example.com/form">
    <input name="fave" /> <input name="name" />
    <button>Submit Vote</button>
  </form>
</body>
</html>

例1

您可以通过将 autocomplete 属性应用于单个输入元素,可以更具体,如以下代码所示。

<!DOCTYPE HTML>
<html>
<body>
  <form autocomplete="off" 
        method="post" 
        action="http://example.com/form">
    <input autocomplete="on" name="fave" /> 
    <input name="name" />
    <button>Submit Vote</button>
  </form>
</body>
</html>

form元素上的autocomplete 属性设置表单中输入元素的默认策略。

您可以覆盖单个元素的该策略。

在上面的代码中,表单元素上的属性禁用自动完成,但是应用于第一个输入元素的相同属性会将其重新打开。

未应用 autocomplete 属性的第二个输入元素受制于表单范围策略。



Form Target

浏览器的默认行为是用响应服务器替换页面。

您可以通过在表单元素上使用 target 属性来更改此行为。

此属性的工作方式与 a 元素上的target属性相同,并且可以从目标范围中进行选择。

  • _blank - 在新窗口(或选项卡)中打开服务器响应
  • _parent - 打开父框架集中的服务器响应
  • _self - 在当前窗口中打开服务器响应(这是默认行为)
  • _top - 在当前窗口中打开服务器响应(这是默认行为)
  • <frame> - 在指定的框架中打开服务器响应

以下代码显示如何使用 target 属性。

<!DOCTYPE HTML>
<html>
<body>
  <form target="_blank" 
        method="post" 
        action="http://example.com/form">
    <input autocomplete="on" name="fave" /> 
    <input name="name" />
    <button>Submit Vote</button>
  </form>
</body>
</html>

Form Name

name 属性设置表单的唯一标识符。

下面的代码显示了一个带有 name 和 id 属性的form元素。它们具有相同的值。

<!DOCTYPE HTML>
<html>
<body>
  <form name="fruitvote" 
        id="fruitvote" 
        method="post"
      action="http://example.com/form">
    <input name="fave" /> 
    <input name="name" />
    <button>Submit Vote</button>
  </form>
</body>
</html>

发布表单时,name属性的值不会发送到服务器。此属性仅在客户端的DOM操作中有用,并且不像输入元素上的name属性那样重要。

如果输入元素没有name属性,则在提交表单时,用户输入的数据将不会发送到服务器。

表单属性

在HTML5中,您可以使用由input,button和其他表单相关元素定义的form属性将元素与文档中任何位置的表单相关联。

要将元素与不是先行的表单相关联,请将form属性设置为表单的id值。

以下代码显示如何使用表单Attribute。

<!DOCTYPE HTML>
<html>
<body>
  <form id="voteform" method="post" action="http://example.com/form">
    <p>
      <label for="fave">Fruit: <input autofocus id="fave"
        name="fave" /></label>
    </p>
  </form>
  <p>
    <label for="name">Name: <input form="voteform" id="name"
      name="name" />
    </label>
  </p>
  <button form="voteform" type="submit">Submit Vote</button>
  <button form="voteform" type="reset">Reset</button>
</body>
</html>

在上面的代码中,只有一个输入元素是 form 元素的后代。另一个input元素和两个button元素都在表单元素之外,并且他们使用 form 属性将自己与表单相关联。


阅读全文
以上是编程学为你收集整理的html表单属性有哪些 HTML 表单属性全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  •  HTML (Videos)播放

    HTML (Videos)播放

    2023-04-11 HTML教程

    HTML 视频(Videos)在 HTML 中播放视频的方法有很多种。可以使用 embed 标签、object 标签以及 video 标签(HTML 5中启用)。 H...

  • html列表标签有哪些 HTML 列表

    html列表标签有哪些 HTML 列表

    2023-04-20 HTML教程

    HTML 列表 HTML 支持有序、无序和定义列表: HTML 列表有序列表 The first list itemThe second list itemThe third list item 无...

  •  XHTML 简介

    XHTML 简介

    2023-05-11 HTML教程

    HTML - XHTMLXHTML 是以 XML 格式编写的 HTML。什么是 XHTML?XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的...

  • core data Core Data by tutorials 笔记(二)

    core data Core Data by tutorials 笔记(二)

    2023-03-25

    原文出处: http://chengway.in/post/ji-zhu/core-data-by-tutorials-bi-ji-er今天继续来重温Raywenderlich家的《Core Data by Tu...

  •  卷2:第14章 NginX

    卷2:第14章 NginX

    2023-06-08 开源软件架构

    原文:http://www.aosabook.org/en/nginx.html作者: Andrew Alexeevnginx(发音"engine x")是俄罗斯软件工程师Igor Sysoev开...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部