我很早学过,只是当时没有系统记录笔记,导致过一段时就容易忘记很多东西。本笔记主要参考HTML-千古前端图文教程w3school - HTML

Tags

<pre>

Preformatted text 预格式化的文本

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Forms

Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

<form>

1
<form>...</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

<input>

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

TypeDescription
<input type="text">Displays a single-line text input field
<input type="radio">Displays a radio button (for selecting one of many choices)
<input type="checkbox">Displays a checkbox (for selecting zero or more of many choices)
<input type="submit">Displays a submit button (for submitting the form)
<input type="button">Displays a clickable button

<input type="text">

The <input type="text"> defines a single-line input field for text input.

Example:

1
2
3
4
5
6
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

<label>

The <label> tag defines a label for many form elements.

Notice the use of the <label> element in the example above.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes)

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

<input type="radio">

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example:

1
2
3
4
5
6
7
8
9
10
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

<input type="checkbox">

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

1
2
3
4
5
6
7
8
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a motorbike</label>
</form>

<input type="submit">

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

Tip: If the name attribute is omitted(省略), the value of the input field will not be sent at all.

Form Attributes 表单属性

Action

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

Example:

On submit, send form data to "action_page.php":

1
2
3
4
5
6
7
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Tip: If the action attribute is omitted, the action is set to the current page.

Target

The target attribute specifies where to display the response that is received after submitting the form.

The target attribute can have one of the following values:

ValueDescription
_blankThe response is displayed in a new window or tab
_selfThe response is displayed in the current window
_parentThe response is displayed in the parent frame
_topThe response is displayed in the full body of the window
framenameThe response is displayed in a named iframe

Method

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

默认值:method="get"

Example: <form action="/action_page.php" method="get">

Notes on GET:

  • Appends the form data to the URL, in name/value pairs
  • NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
  • The length of a URL is limited (2048 characters)
  • GET is good for non-secure data, like query strings in Google
  • Useful for form submissions where a user wants to bookmark the result

Notes on POST:

  • Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
  • POST has no size limitations, and can be used to send large amounts of data.
  • Form submissions with POST cannot be bookmarked
  • Always use POST if the form data contains sensitive or personal information!

Autocomplete 自动补全

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

默认值:autocomplete="on"

Example: <form action="/action_page.php" autocomplete="on">

Novalidate

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

Example:

1
2
3
4
5
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>

该例子中,email 格式错了不会被验证

HTML5 新内容

TODO

☕欲知后事如何,

且听下回分解🍵