Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this article③ HTML Form details


1. What is the difference between POST and GET data submission? 2. What is the function of name in input? 3. What is the function of label? How to use it? 4. How to group radio? 5. Placeholder properties? 6. Type =hidden What does the hidden field do? Give an example. 7. What is a CSRF attack? How to prevent? 8. What is a web verification code for? What kind of security problem is it to solve? 9. Common Web security and protection principles? 10. Which of the following will cause the checkbox to be checked: ✅<input type="checkbox" checked=false >
  ✅ <input type="checkbox" checked=true >
  ✅ <input type="checkbox" checked="" >
  ✅ <input type="checkbox" checked>
  ❌ <input type="checkbox" >11. If you want to check the checkbox, which of the following is recommended: ❌<input type="checkbox" checked=true >
  ❌ <input type="checkbox" checked="true" >
  ❌ <input type="checkbox" checked="checked">
  ✅ <input type="checkbox" checked>12. There are 4 radios, such as ID1 and ID2, ID3 and ID4, to achieve radio selection. (Indefinite term)<input  id="id1" type="radio">
    <input  id="id2" type="radio">
    <input  id="id3" type="radio">
    <input  id="id4" type="radio">✅ Id1 and ID2 must have the same name. Id3 and ID4 must have the same name. ❌ Set the same value for ID1 and ID2, and the same value for ID3 and ID4. ❌ ID1 and ID2 must have the same class, and ID3 and ID4 must have the same class. ❌ SET the same label for ID1 and ID2, and the same label for ID3 and ID4. 13. Which of the following statements is true about the difference between POST and GET? ✅ GET has the semantics of "want" data and POST has the semantics of "give" data or "create" data. ✅ GET Assembles parameters into urls. The GET request is actually the URL after the browser requests the URL. ❌ There is no maximum length limit for data submitted by GET, and there is a maximum length limit for data submitted by POST (related to server Settings). ✅ GET The data submitted has a maximum length limit. The root cause is that the browser address bar has a maximum length limit on the ENTERED URL. ✅ POST is more "secure" because the ASSEMBLED URL of the GET request is saved in the browser history, and there is usually a saved request log that can see the request parameters directly when it arrives on the server. ✅ in a strict security sense, any HTTP request is not secure. HTTPS + POST is secure.Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Preface: This article we focus on a knowledge point – forms.

This knowledge point is very widely used in the work, whether it is a web page or APP, as long as it relates to “registration”, there will be his figure, belongs to the master item.


1. Definition of “Form”

  • An HTML form is a monad that can be used to enter user information. It is an area containing “form elements”.

  • “Form elements” are: elements that allow the user to enter information into a form (e.g., text fields, drop-down lists, check boxes, and so on);

  • For service providers (operators of web pages, apps, etc.), this list can be used to collect different types of user input.


2. Practical application of “form” and annotation of related elements

  • ✅ Task: Write the HTML for the following images.

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>The HTML form</title>
  <style type="text/css">
    #txa {
      width: 300px;
      height: 200px;
      margin-left: -12px;
    }
  </style>
</head>
<body>
  <div class="login">
    <input type="text" name="sex"> <! -- ❗️
    <form action="/getinfo" method="get"> <! -- ❗️
      <div class="username"> <! -- ❗️
        <label for="username">The name</label> <! -- ❗️
        <input id="username"  type="text" name="username" value="Oliver"> <! -- ❗️

      </div>
      <div class="password">
        <label for="password" >password</label>

        <input id="password" type="password" name="password" placeholder="Enter your password"> <! -- ❗️

      </div>
      <div class="sex">
        <label>gender</label> <! -- ❗️
        <input type="radio" name="sex" value="Male" checked>male<! -- ❗️
        <input type="radio" name="sex" value="Female">female</div>
      <div class="orientation">
        <label>orientation</label>
        <input type="radio" name="orientation" value="Male">male<input type="radio" name="orientation" value="Female" checked>female</div>
      <div class="hobby">
        <label>hobby</label>
        <input type="checkbox" name="hobby" value="reading" checked>Reading a book<! -- ❗️
        <input type="checkbox" name="hobby" value="design" checked>Interior design</div>
      <div>
        <label for="txa">Comment on:</label>
        <textarea id="txa" name="article">A good man!</textarea> <! -- ❗️
      </div>
      <div class="file">
        <input type="file" name="myfile" accept="image/png"> <! -- ❗️
      </div>  
      <div class="mycar">
        <label>My car</label>
        <select name="mycar"> <! -- ❗️
          <option value="Mitsubishi" selected>mitsubishi</option> <! -- ❗️
          <option value="Audi">audi</option>
          <option value="MINI">MINI</option>
        </select>
        <input type="submit" value="Submit"> <! -- ❗️
        <input type="button" value="Do not submit"> <! -- ❗️
        <input type="reset" value="Reset input"> <! -- ❗️
        <input type="hidden" name="csrf" value="123456oliver"> <! -- ❗️
      </div>
    </form>
  </div>
</body>
</html>
Copy the code

Note 1:

<input type="text" name="sex">
Copy the code

  • HTML forms must use

    … The

    tag wraps around all input fields. When you click “Submit”, it will “submit” all the input information wrapped in the

    to the corresponding background address of the form.

  • The input for this comment is not wrapped in

    , so it will not be “submitted” to the background when it is “submitted”.

Note 2.

 <form action="/getinfo" method="get">
Copy the code

  • All input fields must be wrapped with

    ;

  • Action is the background path corresponding to the “form” submission process;

  • Method refers to the method (GET or POST) by which a form is submitted:

① GET is essentially a URL splicing, that is, all parameters are spliced together to form a new URL. What does the browser do when we click submit?

  • First, he takes out the input, type=text, and gets the content inside. The content inside is the text, password, etc.

  • Select name from input (username/password);

  • Finally, username = the name entered, password = the password entered, etc., and then spell it into a URL. (such as: localhost: 8080 / ABC? The username = Oliver&password = 123456)

② The POST URL does not change, unlike GET, the URL will become a concatenation of parameters and then transmitted to the background. However, the data filled in by the user is still transmitted to the background through the browser (which is more secure than GET), and its URL character length is not limited by the length of the browser’s address bar. (GET, however, will be truncated by the browser if the number of parameters is too long.)

③ When do I choose GET/POST?

  • You can GET some data from the background. For example, look up papers and data in the background.

  • POST is used to send data to the background. For example, write a big article and send it to the background.

Note 3:

<div class="username">
Copy the code

A “block” is defined by a div, and a “class” is defined by a class (similarly).

Note 4:

<label for="username">The name</label> <! -- Note 4 -->

<input id="username"  type="text" name="username" value="Oliver"> <! -- Note 5 -->
Copy the code

  • Label for is to prefix an input field with a clickable description;

  • The “for” in the label and the “ID” in the input are used together for: Normally, if I want to input in the input box, I only click the description in the front and there is no response. I have to click the input box to enter the input mode. Here, the combination of label for and ID enables you to click the input text in front of the input box and enter the input mode. (Note: For must have an ID)

Note 5:

<label for="username">The name</label> <! -- Note 4 -->

<input id="username"  type="text" name="username" value="Oliver"> <! -- Note 5 -->
Copy the code

  • Type =”text”, this input box is used to enter a single line of text. We use the element to create several different controls. The type property determines what type of control it is.

  • Name =”username”, most form elements require a name, which is equivalent to an identifier for user input data. The backend server script will use this element name and extract the parameters inside (see note 2, how the form is submitted to the backend);

  • Value =”Oliver”, where I enter for example an initial value — Oliver, we can enter or not enter any initial text (for example: value=””).

Note 6:

<div class="password">
  <label for="password">password</label>

  <input id="password" type="password" name="password" placeholder="Enter your password"> <! -- Note 6 -->

</div>
Copy the code

  • Type =”password”, this input box is used to enter the password;

  • Placeholder =” Enter password “, which uses shaded text to guide the user to “enter password” in the box.

Note 7:

<div class="sex">
  <label>gender</label> <! -- Note 7 -->
  <input type="radio" name="sex" value="Male" checked>male<! -- Note 8 --> 
  <input type="radio" name="sex" value="Female">female</div>
Copy the code

There is no for in the label and no ID in the input. Because the input is a “checkbox” type, there is no need to click on the text (gender) to select or enter.

Note 8:

<div class="sex">
  <label>gender</label>                                   <! -- Note 7 -->
  <input type="radio" name="sex" value="Male" checked>male<! -- Note 8 --> 
  <input type="radio" name="sex" value="Female">female</div>
Copy the code

  • Type =”radio”, this is “radio button input “, for radio;

  • Name is all sex, we single submit, background script in the extraction of each name parameter, will be the corresponding sex = male/female;

... Value =" male "checked> male...... Value = "female" > femaleCopy the code

Because it is checked, there is no input in the input box, if there is no value, then the user only check and submit, we have nothing in the background. Therefore, you must manually add a value so that the selected value can be displayed in the background.

  • Checked means checked by default.

Note 9:

<div class="hobby">
  <label>hobby</label>
  <input type="checkbox" name="hobby" value="reading" checked>Reading a book<! -- Note 9 -->
  <input type="checkbox" name="hobby" value="tour" checked>tourism<input type="checkbox" name="hobby" value="design" checked>Interior design</div>
Copy the code

  • Type =”checkbox”;

  • Similarly, type=”radio”, name is hobby;

  • For the same reason, add value manually.

Note 10:

<div>
  <label for="txa">Comment on:</label>
  <textarea id="txa" name="article">A good man!</textarea> <! -- Note 10 -->
</div>
Copy the code

  • Textarea, this is multi-line text input, as opposed to single line text input type=”text”;

  • Since

Note 11:

<div class="file">
  <input type="file" name="myfile" accept="image/png"> <! -- Note 11 -->
</div>  
Copy the code

  • Type =”file”, this is used to upload files, such as identity information;

  • Accept =”image/ PNG “, the Accept attribute can be used to restrict the format of uploaded files. For example, only image/ PNG can be uploaded (but in practice, our front-end restriction is not reliable, and we need the backend to do the same).

Note 12, 13:

<div class="mycar">
  <label>My car</label>
  <select name="mycar">   
      <option value="Mitsubishi" selected>mitsubishi</option> 
      <option value="Audi">audi</option>
      <option value="MINI">MINI</option>
  </select>
Copy the code

  • It’s not input anymore, it’s a combination of select and option;

  • This is for “select from the drop-down menu”;

  • The manual addition of value is the same as that of type=”radio” and type=”checkbox”;

  • Selected can be used to “pre-check”.

Notes 14, 15, 16:

<input type="submit" value="Submit"> <! -- Note 14 -->
<input type="button" value="Do not submit"> <! -- Note 15 -->
<input type="reset" value="Reset input"> <! -- Note 16 -->
Copy the code

  • Type =”submit”, type=”reset”, type=”button”;

  • The difference between “value” and “no value” is whether the button has a corresponding text on it.

Note 17:

<input type="hidden" name="csrf" value="123456oliver">
Copy the code

  • This group of code has no effect on the page display, but after clicking “submit”, the relevant parameters in this group of code will be submitted to the background;

  • What this set of code does:

  1. Save some information temporarily. For example, contains a value, and the next time we need to use it, we can directly locate the element to retrieve its value, and then use it, but the user does not know anything about it;

  2. Since information can be temporarily stored, this feature can be used when using some security policies – CSRF attacks.

Review of relevant article: “(01) truism input from the URL to the page to show what happened behind | Web front knowledge”.

For example, when you open up a page, the actual page is a template that you’ve written, and then the back end fills it with data that you can see.

In other words, the page is the result of back-end processing. So let’s say that when the back end renders the page to us (before returning it to the browser), it adds this value in this way — , and it writes it out and sends it to you. After sending it to you, the page you see appears to have nothing special changed, but in fact there is a dot buried — name=” CSRF “value=”123456oliver”.

Next, the user should do or continue to do, fill in the user name, password, etc., after filling in, click “submit”. When the user clicks the “Submit” button, all the information entered by the user is submitted to the background, and the value in is submitted: CSRF = 123456OLIVER.

After submitting to the background, the background can do a “check” to see if the value is correct. If the value is correct, then your user’s submission is safe.

If there is no such a parameter, interface, then anyone can forge such a page. For example, if he knows our request address (the value of the action), he can send a GET/POST request with method, and send all the parameters in. That would be like modifying the database.

But if we have a value — CSRF = 123456OLIVER — and he doesn’t have one, or gets the wrong value, the server won’t recognize him even if he sends the data.

Only if the value sent by the user is correct, it indicates that the user has the permission and is a legitimate user. This prevents CSRF attacks.

Of course, CSRF attacks also involve Cookie validation, which will be covered in a later article.


Postscript: knowledge points are a lot, very miscellaneous, but calm down, with two monitors, while the code copy into JS Bin inside the operation, while the annotations of this article line by line to straighten out the code, and finally will find that is no more than this. Front-end learning is more of a test of endurance, interest is important, but not put into time and endurance is not.

I wish you good, QdyWXS ♥ you!