本文概述

• HTML < form> 元素属性
• HTML动作属性
• HTML目标属性
• HTML自动完成属性
• HTML enctype属性
• HTML novalidate属性HTML5
• HTML < input> 元素属性
• HTML名称属性
• HTML值属性
• HTML必需属性HTML5
• HTML自动对焦属性HTML5
• HTML占位符属性HTML5
• HTML禁用属性
• HTML大小属性
• HTML表单属性

HTML < form> 元素属性在HTML中, < form> 元素有多种可用属性, 如下所示：
HTML动作属性< form> 元素的action属性定义提交表单时要在表单上执行的过程, 或者它是用于处理表单信息的URI。
动作属性值定义了进行信息的网页。它可以是.php, .jsp, .asp等, 也可以是你要处理表单的任何URL。
注意：如果动作属性值为空白, 则表单将被处理到同一页面。例：

< form action="action.html" method="post"> < label> User Name:< /label> < br> < input type="text" name="name"> < br> < br> < label> User Password< /label> < br> < input type="password" name="pass"> < br> < br> < input type="submit"> < /form>

立即测试
输出：

Demo of action attribute of form elementUser Name:User PasswordIt will redirect to a new page "action.html" when you click on submit button

HTML方法属性
method属性定义浏览器用来提交表单的HTTP方法。方法属性的可能值为：

• post：我们要处理敏感数据时可以使用method属性的post值, 因为它不会在URL中显示已提交的数据。

例：

< form action="action.html" method="post">

• get：提交表单时, method属性的get值为默认值。但这并不安全, 因为在提交表单后, 它会在URL中显示数据。

例：

< form action="action.html" method="get">

提交数据时, 它将以以下形式显示输入的数据：

file:///D:/HTML/action.html?name=srcmini& pass=123

HTML目标属性target属性定义提交表单后在何处打开响应。以下是与target属性一起使用的关键字。

• _self：如果我们将_self用作属性值, 则响应仅显示在当前页面中。

例：

< form action="action.html" method="get" target="_self">

• _blank：如果我们使用_blank作为属性, 它将在新页面中加载响应。

例：

< form action="action.html" method="get" target="_blank">

HTML自动完成属性HTML自动完成属性是HTML5的新添加的属性, 它使输入字段能够自动完成。它可以有两个值“ on”和“ off”, 以启用“ ON”或“ OFF”自动完成功能。自动完成属性的默认值为“ on”。
例：

< form action="action.html" method="get" autocomplete="on">

例：

< form action="action.html" method="get" autocomplete="off">

注意：它可以与< form> 元素和< input> 元素一起使用。HTML enctype属性HTML enctype属性定义了在将表单提交给服务器时表单内容的编码类型。 enctype的可能值为：

• application / x-www-form-urlencoded：如果表单中未包含enctype属性, 则为默认编码类型。提交表单之前, 所有字符均已编码。

例：

< form action="action.html" method="post" enctype="application/x-www-form-urlencoded" >

• multipart / form-data：不编码任何字符。当我们的表单包含文件上传控件时使用它。

例：

< form action="action.html" method="post" enctype="multipart/form-data">

• 文本/纯文本（HTML5）：在此编码类型中, 仅空格被编码为+符号, 而没有任何其他特殊字符被编码。

例：

< form action="action.html" method="post" enctype="text/plain" >

HTML novalidate属性HTML5novalidate属性是HTML5的新添加的布尔属性。如果我们在表单中应用此属性, 则它不会执行任何类型的验证并提交表单。
例：

< form action = "action.html" method = "get" novalidate>

立即测试
输出：

Fill the formEnter name:Enter age:Enter email:Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference.

HTML < input> 元素属性HTML名称属性HTML名称属性定义输入元素的名称。提交表单时, name和value属性包含在HTTP请求中。
注意：不应忽略name属性, 因为当我们提交表单时, HTTP请求将同时包含name-value对, 并且如果name不可用, 它将不会处理该输入字段。例：

< form action = "action.html" method = "get"> Enter name:< br> < input type="name" name="uname"> < br> Enter age:< br> < input type="number" name="age"> < br> Enter email:< br> < input type="email"> < br> < input type="submit" value="http://www.srcmini.com/Submit"> < /form>

立即测试
输出：

Fill the formEnter name:Enter age:Enter email:Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form.Click on submit and see the URL where email is not included in HTTP request as we have not used name attribute in the email input field

HTML值属性HTML值属性定义输入字段的初始值或默认值。
例：

< form> < label> Enter your Name< /label> < br> < input type="text" name="uname" value="http://www.srcmini.com/Enter Name"> < br> < br> < label> Enter your Email-address< /label> < br> < input type="text" name="uname" value="http://www.srcmini.com/Enter email"> < br> < br> < label> Enter your password< /label> < br> < input type="password" name="pass" value=""> < br> < br> < input type="submit" value="http://www.srcmini.com/login"> < /form>

立即测试
输出：

Fill the form Enter your NameEnter your Email-addressEnter your passwordNote: In password input filed the value attribute will always unclear

HTML必需属性HTML5所需的HTML是布尔属性, 它指定用户必须在提交表单之前填写该字段。
例：

< form> < label> Enter your Email-address< /label> < br> < input type="text" name="uname" required> < br> < br> < label> Enter your password< /label> < br> < input type="password" name="pass"> < br> < br> < input type="submit" value="http://www.srcmini.com/login"> < /form>

立即测试
输出：

Fill the form Enter your Email-addressEnter your passwordIf you will try to submit the form without completing email field then it will give an error pop up.

HTML自动对焦属性HTML5自动聚焦是一个布尔属性, 可在加载网页时使字段自动聚焦。
例：

< form> < label> Enter your Email-address< /label> < br> < input type="text" name="uname" autofocus> < br> < br> < label> Enter your password< /label> < br> < input type="password" name="pass"> < br> < br> < input type="submit" value="http://www.srcmini.com/login"> < /form>

HTML占位符属性HTML5占位符属性在输入字段中指定一个文本, 该文本通知用户该字段的预期输入。
占位符属性可以与文本, 密码, 电子邮件和URL值一起使用。
当用户输入值时, 占位符将被自动删除。
例：

< form> < label> Enter your name< /label> < br> < input type="text" name="uname" placeholder="Your name"> < br> < br> < label> Enter your Email address< /label> < br> < input type="email" name="email" placeholder="example@gmail.com"> < br> < br> < label> Enter your password< /label> < br> < input type="password" name="pass" placeholder="your password"> < br> < br> < input type="submit" value="http://www.srcmini.com/login"> < /form>

立即测试
输出：

Registration formEnter your nameEnter your Email addressEnter your password

HTML禁用属性应用HTML禁用属性后, 它将禁用该输入字段。禁用字段不允许用户与该字段进行交互。
禁用的输入字段不会接收单击事件, 并且在提交表单时, 这些输入值不会发送到服务器。
例：

< input type="text" name="uname" disabled> < br> < br>

立即测试
输出：

Registration formEnter User nameEnter your Email addressEnter your password

HTML大小属性size属性控制以键入字符表示的输入字段的大小。
例：

< label> Account holder name< /label> < br> < input type="text" name="uname" size="40" required> < br> < br> < label> Account number< /label> < br> < input type="text" name="an" size="30" required> < br> < br> < label> CVV< /label> < br> < input type="text" name="cvv"size="1" required> < br> < br>

立即测试
输出：

Registration form with disbaled attribute Account holder nameAccount numberCVV

HTML表单属性HTML表单属性允许用户指定在表单外部提交的输入, 但仍是父表单的一部分。
例：

User email: < br> < input type="email" name="email"form="fcontrol"required> < br> < input type="submit" form="fcontrol">

立即测试
【HTML表单属性】输出：

User Name:User password:The email field is outside the form but still it will remain part of the formUser email:

推荐阅读

• 

  胡萝卜切片怎么切
• 

  k8s原来这么简单（二）安装k8s1.23集群
• 

  亚冠分组抽签 亚冠16强如何产生8强，欧冠16强名单
• 

  动车上的厕所在哪个位置
• 

  微信自动扣费服务在哪里关闭
• 

  孕妇适合吃的干果类有哪些 孕妇能吃哪些坚果
• 

  白玫瑰一般送多少朵 送多少玫瑰
• 

  针织布头最大批发市场在哪里
• 

  呼啦圈是不是越重越好 呼啦圈是否越重越好
• 

  教育学主要学习一些什么课程
• 

  要女朋友是干什么的 女朋友怎么样
• 

  工作方法分析的步骤,工作分析的步骤包括哪些?
• 

  杜兰特生日是几月几号
• 

  豆角怎么吃减肥 豆角如何吃减肥
• 

  海尔混动热水器星悦YTS 海尔电热水器型号
• 

  湿气重一个月汗蒸几次
• 

  奇亚籽为啥越吃越胖
• 

  武夷岩茶水仙怎么喝 武夷岩茶水仙怎么泡
• 

  小舍得
• 

  java heap文件分析

• HTML表单输入类型
• HTML表单详解
• HTML input标签
• HTML图片
• HTML iframe用法
• HTML ID属性
• HTML html标记
• HTML hr标签
• HTML H标题标签