HTML Forms

HTML Forms （HTML表单）

An HTML form is composed of form elements, which are different kinds of input elements, such as checkboxes, text fields, submit buttons, radio buttons, and so on. （HTML表单由表单元素组成，这些表单元素是不同类型的输入元素，例如复选框、文本字段、提交按钮、单选按钮等。）

The HTML <input> element

The HTML <input> element

The <input> element is an essential form element, which, depending on the type attribute, can be displayed in different ways.

Let’s speak about some of input types. （让我们来谈谈一些输入类型。）

Text input

<input type=“text”>

Example of the text input: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>Text Input Example</h2>
   <form>
     Name:<br>
     <input type="text" name="name">
     <br>
     Surname:<br>
     <input type="text" name="surname">
   </form>
 </body>
</html>

Radio Button Input

The <input type=“radio”> specifies a radio button with the help of which you can select one of many choices.

Example of the radio button input: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>Radio Button Example</h2>
   <form>
     <input type="radio" name="game"value="football" checked> Football
     <input type="radio" name="game" value="basketball"> Basketball
   </form>
 </body>
</html>

Submit input

The <input type=“submit”> submits the form data to a form-handler.

The form-handler is a server page with a script to process input data, which is defined in the action attribute of the form. （表单处理程序是一个服务器页面，其中包含用于处理输入数据的脚本，该脚本在表单的action属性中定义。）

Example of the submit input: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>HTML Form Example</h2>
   <form action="/form/submit" method="POST">
     Name:<br>
     <input type="text" name="firstname" value="Tom">
     <br>
     Surname:<br>
     <input type="text" name="lastname" value="Brown">
     <br>
     Age:<br>
     <input type="text" name="Age" value="21">
     <br><br>
     <input type="submit" value="Submit">
   </form>
   <p>Click the "Submit" button, to sent the form-data to the action page.</p>
 </body>
</html>

The Action Attribute

The Action Attribute （操作属性）

The action attribute specifies the action that should be performed when the form is submitted. （Action属性指定提交表单时应执行的操作。）

When the user the form data is sent to a web page on the server when the user clicks on the submit button. （当用户单击提交按钮时，表单数据将发送到服务器上的网页。）

<form action="/form/submit">

The Target Attribute

The Target Attribute （目标属性）

The target attribute defines whether the form result is open in a new browser tab, frame, or in the current window. （Target属性定义表单结果是在新的浏览器选项卡、框架中打开，还是在当前窗口中打开。）

The default value of this attribute is _self. Using this value will open the form result in the current window. （此属性的默认值为_self。使用此值将在当前窗口中打开表单结果。）

The _blank value will open the form result open in a new browser tab. （_blank值将在新的浏览器选项卡中打开表单结果。）

<form action="/form/submit" target="_blank">

The Method Attribute

The Method Attribute （方法属性）

The method attribute defines the HTTP method (GET or POST) that will be used when submitting the form data. （方法属性定义了提交表单数据时将使用的HTTP方法（ GET或POST ）。）

Example of the GET method: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>The method Attribute With the GET Method</h2>
   <form action="/form/submit" target="_blank" method="GET">
     Neame:<br>
     <input type="text" name="name" value="Tom">
     <br>
     Surname:<br>
     <input type="text" name="Surname" value="Brown">
     <br>
     Age:<br>
     <input type="number" name="Aage" value="21">
     <br><br>
     <input type="submit" value="Submit">
   </form>
   <p> Here we used the "_blank" value, which will open the form result in a new browser tab.</p>
 </body>
</html>

Example of the POST method: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <h2>The method Attribute With the Post Method</h2>
   <form action="/form/submit" target="_blank" method="POST">
     Name:<br>
     <input type="text" name="name" value="Tom">
     <br>
     Surname:<br>
     <input type="text" name="surname" value="Brown">
     <br>
     Age:<br>
     <input type="number" name="age" value="21">
     <br><br>
     <input type="submit" value="Submit">
   </form>
 </body>
</html>

When to use the GET Method

When to use the GET Method （何时使用GET方法）

GET is the default method when submitting form data, and when using this method the form data is visible in the page address field. （GET是提交表单数据时的默认方法，使用此方法时，表单数据在页面地址字段中可见。）

Don’t use the GET method to send sensitive data, because it will be visible in the URL. （>不要使用GET方法发送敏感数据，因为它将在URL中可见。）

The GET method is useful for form submissions where a user wants to bookmark the result. （> GET方法对于用户想要将结果添加到书签的表单提交非常有用。）

The length of a URL is limited (maximum 2048 characters). （>网址长度有限（最多2048个字符）。）

When to use the POST Method

When to use the POST Method （何时使用POST方法）

If the form data includes sensitive or personal information, always use the POST method, as it doesn’t display the submitted form data in the page address field. （如果表单数据包含敏感信息或个人信息，请始终使用POST方法，因为它不会在页面地址字段中显示提交的表单数据。）

As there are no size limitations while using the POST method, it can be used to send large amounts of data. （>由于使用POST方法时没有大小限制，因此可用于发送大量数据。）

Form submissions with the POST method can’t be bookmarked. （无法为使用POST方法提交的表单添加书签。）

Other Attributes

Other Attributes （其他属性）

Below you can find other <form> attributes:

AttributeDescription
accept-charsetThis attribute defines the charset that is used in the submitted form (default: the page charset).
autocompleteThis attribute defines whether the browser should autocomplete the form or not (default: on).
enctypeThis attribute defines the encoding of the submitted data (default:url-encoded).
nameThis attribute defines a name that is used to identify the form.
novalidateThis attribute defines that the browser must not validate the form.
← HTML YouTube Videos
alt →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部