This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

The first part of the 20,000 words in blood and text summary (the first part)

A summary in blood in 20,000 Words

A summary in blood with pictures and pictures (iN the second part)

Part five: Forms (very important!!)

1. What is it & what function & what application

(1) What is a form?

A form is a collection area of various form elements that collect user data information. (Remember the request methods GET and POST no!!)

(2) The function of forms?

(1) Used for receiving user data and sending to the background;

(2) One of the ways of front and rear end interaction.

(3) Application of forms?

Login registration, search, file upload, etc.

2. Properties of the form:

  1. Action: The address of the submission. The default is the current page. A program that points to the server.
  2. Method: The method used to commit. The default is GET

  3. Entype: Use the default value

3. Common labels for forms:

  1. Input tag: The most frequently used tag in the form, no one!
  2. Textarea tags: Text fields, typically used for multiple lines of text;
  3. Select TAB: Drop – down box, usually used for options.

(1) Input label:

1. Common attributes of the input tag:

Id is mainly used for styles or JS. No Chinese or numbers. Used to express uniqueness! (The reason for using ID matches in future page parsing is that they are unique!)
  • (1) Name attribute: the key of the form submission item. Different from ID, name attribute is the name used when communicating with the server (the input tag must have), and ID attribute is the name used by the browser side. This attribute is mainly used in CSS and JS for the convenience of client programming.
  • (2) Value attribute: the value of the submitted item in the form. The value attribute must be set in the drop-down box of radio and multiple options, so that the background can get which or which options are selected.

Type = ‘image’;

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action=""> <! --typeWhen the property value is Image, it is a submit button in the form of an image. -- > <! The SRC attribute places the image address; The Alt property makes the image clickable, just like the submit button, and displays the value of the Alt property if the image is in error --> <input type="image" src="girl.jpg" alt="submit">
</form>


</body>
</html>
Copy the code
  • ③ Placeholder: Improving user experience;
  • ④readonly: readonly. (For example, you can not operate your QQ number)
  • ⑤ Disabled: Disabled; (For example, if you use PyCharm, some options are off-white and cannot be used)

The readonly attribute and the disabled attribute are used for the following purposes:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action=""User name: <input type="text" name="user"Readonly > < br > account & emsp; No. : <input type="password" name="pdw" disabled>
</form>

</body>
</html>
Copy the code

  The user name is read-only, so you cannot enter a value in the text box. The account is disabled. It’s greyed out.

2. Description of the value of the type attribute commonly used in the input tag

🎈text text 🎈password password 🎈radio radio 🎈checkbox 🎈file select peep Hidden Hidden field Hidden is something that is invisible to the user and saves information for the administrator (web page writing) operation! 🎈submit Submit 🎈reset Reset

(2) Select the drop-down list

  • Options: Drop-down options (the basic TAB of the drop-down box) : There are as many drop-down options as there are options;
  • Selected: Drop-down state: Select a drop-down option.
  • Size: drop-down box display: indicates the drop-down box, how many to display, the default is one;
  • Name: name of the drop-down box: the name of the drop-down box when the data is submitted to the background.

Actual combat – multi-level drop-down box implementation:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action=""Address: <select name="address" id="address" size="1"> <! -- Attribute size is to display several drop-down boxes --> < optGroup label="Hunan Province"> <! -- Group dropdowns in the optGroup TAB --> <option value="CS"</option> <! -- Tag option is a drop-down option --> <option value="ZZ"</option> <option value="LD"</option> </ optGroup > <optgroup label="Hubei Province">
                 <option value="WH"</option> <! </ optGroup > </select> </form> </body> </ HTML >Copy the code

 Effect screenshot:

4. What do you think of the form?

(1) A summary of the elements contained in the form tag:

A summary of the elements contained in the form:

(2) Comprehensive practical examples:

The code:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> Form </title> </head> <body> <! Form +Tab--> <form action="" method=""> <! -- The path to which action needs to submit to the method is limited in length, which is not very safe and will display your information. Post has no length limit and is safe --> Name: <input type="text" placeholder="Please enter your name"><br> Password: <input type="password" placeholder="Please enter your password"><br> <! - iftypeIf the attribute value is password, it will not be displayed when typing in the web page. -- Checked is the default checked option when the page is refreshed. Notice that the checked attribute is the same as the name of the attribute.input type="radio"name="sex" value="male"Checked male > <! -- Names with the same value mean they are of the same class. To achieve a single!! --> <input type="radio" name="sex" value="female"Female > <! > <br> <input type="submit" value="Login"> <! -- The submit button, which defaults to "submit", can be changed by changing value --> <input type="reset"> <! -- Reset the button to restore all information to default --> <input type="button" value="This is a normal button."> <! </form> </body> </ HTML >Copy the code

 Realized effect:

4. Expand SAO operation:

(1) Some other commonly used labels in forms:

  • Legend: Set the title of the grouped form
  • ② Label: improves user experience

    A single box can only be selected by clicking the circle. The word corresponding to the label implementation dot can also be selected, but before using the button you need to take the ID, because the label implementation matches one by one by ID.

  • The fieldset tag is used to set groups of forms.
	<! DOCTYPEhtml>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	</head>
	<body>
	
	<form action="">
	
	    <fieldset>          						   <! -- To group forms, use the fieldset tag -->
	        <legend>That's the name of the group!</legend>         <! Legend -->User name:<input type="text" placeholder="Please enter your user name." name="user"><br>
	        密&emsp;Code:<input type="password" placeholder="Please enter your password" name="pwd"><br>
	    </fieldset>
	
	</form>
	
	
	</body>
	</html>
Copy the code

Realized effect:

(2) Expand some simple use of small tags:

(1) Italic labels:

I em To play an important role (part of a text that needs to be emphasized)Copy the code

② Bold label:

A strong B strong C strong D strongCopy the code

③ To insert a video tag in a web page:

Video (SRC = video address, either local or web address)Copy the code

(4) Add music tags to the web page:

Audio (SRC property value for audio address controls property opens the control operation for audio)Copy the code

Note: You can play the audio at the same time, no matter how many are written. But if you write like this, only the first address correct audio will be played!!Copy the code

⑤ Similar to subtitles:

marquee

Related attributes and attribute values:

Scroll direction(includes 4 values :up, Down, left and right by default);

Behavior (Scroll: cyclic scroll, default effect; Slide: Stops after scrolling only once; Alternate: to scroll back and forth

Scrollamount (ScrollAmount is the number of pixels to move per scroll);

Scrolldelay (set the scrolling interval, in milliseconds);

Scrolling loop (default is -1, and scrolling will continue);

Set the background color of the activity caption bgcolor, background color can be RGB, hexadecimal value format or color name to set;

Width and Height Sets the width and height of the active subtitle.

⑥ Newline tags:

br
Copy the code

⑦ Dividing line label (two common attributes: size attribute — specifies the thickness of the horizontal line; Color property – specifies the color of the divider!

hr
Copy the code

5. In The End!

Start from now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

The blogger will continue to update the basic crawler column and actual crawler column (for better page analysis of friends, will also update part of the front-end essential knowledge blog!) If you have read this article carefully, you can like it and comment on it. And can follow this blogger, in the days to read more reptilian!

If there are any mistakes or inappropriate words, please point them out in the comment section. Thank you! If reprint this article, please contact me to explain the meaning and annotate the source and the name of this blogger, thank you!Copy the code