Front-end form and css (1)

Front-end form and css (1)

1. form form

The form form is used to transfer data from the user interface to the server to realize the interaction between the user and the web server. The form contains input series labels such as text fields, check boxes, radio buttons, submit buttons, etc.

1.1 Form attributes

Attributes

description

accept-charset

Specifies the character set used in the submitted form (default: page character set)

action

Specifies the address (URL) where the form is submitted (submission page)

autocomplete

Specify the browser to automatically complete the form (default: on)

enctype

Specifies the encoding of the submitted data (default: url-encoded)

method

Specifies the HTTP method used when submitting the form (default: get)

name

Specifies the name of the recognized form (for DOM use: document.form.name)

novalidate

Specifies that the browser does not validate the form

Specifies the target of the address in the action attribute (default: _self)

1.2input

The input element implements different interface functions according to different type attributes.

type

Manifestations

Corresponding code

text

Single line input text

<input type="text" id="dl" value="ahao" name="username">

password

Password input box

<p>Password: <input type="password"></p>

date

Date input box

<p>Birthday: <input type="date"></p>

CheckBox

Checkbox

<input type="checkbox" name="hobby" value="basketball">

radio

Single box

<input type="radio" name="gender" value="male">

submit

Submit button

<input type="submit" value="Submit">

reset

Reset button

<input type="reset" value="reset">

button

Normal button

<input type="button" value="Button">

hidden

Hide input box

<input type="hidden"></p>

file

Text selection box

<input type="file" name="my_file"></p>

The name and value are the key and value of the data that the page sends to the backend (all tags that get user input should have a name attribute). When the submit button is clicked, the data will be submitted to the backend, and all will be reset when the reset button is clicked. Select the data of the box. The value of the input box such as the user name is the default value in the box, that is, if there is input, press the input, if not, use the default value. In addition, the input can add the disabled attribute to disable the input box (applicable to all inputs). The method of selecting the label (radio, checkbox) to set the default selected is to add checked='checked' (you can also just write checked, when the attribute name and When the attribute value is the same, only the attribute value can be written)

value: the value of the corresponding item when the form is submitted

  • When type="button", "reset", "submit", it is the text year content displayed on the button
  • When type="text","password","hidden", it is the initial value of the input box
  • type="checkbox", "radio", "file", is the value associated with the input

readonly: text and password settings are read-only

If you need to submit file data for the form form, you need to modify the enctype in the properties of the form, that is, modify it to enctype="multipart/form-data", as shown in the following program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
<h1>Registration page</h1>
<form action="https://www.123.com.cn" method="post" enctype="multipart/form-data">
    <p>
        <label for="dl">
            Username: <input type="text" id="dl" value="ahao" name="username">
        </label>
    </p>
    <p>Password: <input type="password"></p>
    <p>Birthday: <input type="date"></p>
    <p>Gender:
        Male <input type="radio" name="gender" value="male">
        Female<input type="radio" name="gender" value="female">
    </p>
    <p>Hobbies:
       Basketball <input type="checkbox" name="hobby" value="basketball">
       Football <input type="checkbox" name="hobby" value="football"></p>
    <p>
        province:
        <select name="provience" id="">
            <option value="shenzhen">Shenzhen</option>
            <option value="zhejiang">Zhejiang</option>
            <option value="henan">Henan</option>
        </select>
    </p>
<p>
    research direction:
    <select name="" id="1" multiple>
    <option value="">Drone</option>
    <option value="">Robot</option>
    <option value="">Artificial Intelligence</option></select>
</p>
<p>Introduction:
    <textarea name="info" id="" cols="100" rows="10"></textarea></p>
<p>Resume:
    <input type="file" name="my_file"></p>
    <p>Hide tags:
        <input type="hidden"></p>
    <p>
        <input type="button" value="Button">
        <input type="reset" value="reset">
        <input type="submit" value="Submit">
        <button>Submit button</button><!--This is also the submit button-->
    </p>


</form>

</body>
</html>

1.2.1 Two ways to submit data in form

<input type="submit" value="Submit">
<button>Submit button</button><!--This is also the submit button-->

1.3select tag

Attributes

Description

multiple

Boolean attribute, multi-select after setting, otherwise the default is single-select

disabled

Disable

selected

This option is selected by default

value

Define the option value when submitting

<p>
    research direction:
    <select name="" id="1" multiple>
    <option value="">Drone</option>
    <option value="">Robot</option>
    <option value="">Artificial Intelligence</option></select>
</p>

1.4label

Definition: The label defines the label for the input element (when clicking the text next to the input box, the cursor will also jump to the input box, as the user name in the following example). Description:

  1. The label element does not present any special effects to the user.
  2. The value of the for attribute of the tag should be the same as the value of the id attribute of the related element.
 <label for="dl">
            Username: <input type="text" id="dl" value="ahao" name="username">
        </label>

1.5textarea multi-line text label

Attributes

description

name

name

row

Rows

cols

Number of columns

disabled

Disable

<p>Introduction:
    <textarea name="info" id="" cols="100" rows="10"></textarea></p>

2. CSS

2.1 Introduction to css

css (cascading style sheet, cascading style sheet) defines how to display HTML elements. When the browser reads a style sheet, it will format it according to this style sheet (formatting is rendering).

2.2css syntax

2.2.1css instance

Each css style is composed of selectors and declarations. The declarations include attributes and attribute values. Each declaration is separated by a semicolon.

2.2.2css comments

The css comment method is the same as the C language multi-line comment method, but it should be noted that the CSS single-line comment method is the same as the multi-line comment method.

/*Comment*/

2.3 Several ways to introduce css

The so-called introduction method is the method of executing the css code in the HTML page code.

2.3.1 Inline style

Inline style refers to setting the css style in the style attribute of the mark, which is not recommended.

<p style="color: aqua">Welcome to my blog</p>

2.3.2 Internal style

Write css styles in the style tag pair of the head tag pair, the format is as follows:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>p{
                background-color: aqua;
            }
    </style>
</head>
<body>
<p>I am the p tag</p>
</body>

2.3.3 External style

This style refers to writing css in another file, and then importing it into the page to control the page.

For example: link can be placed in the head tag pair and the body tag pair

<link rel="stylesheet" href="01.css">

2.4css selector

The css selector is to use css to achieve one-to-one, one-to-many or many-to-one control of the elements in the HTML page. The "selector" specifies the object of the "style" in {}, that is, the "style" acts on Which elements on the page

2.4.1 Basic selector

2.4.1.1 Element selector

p{
                background-color: aqua;
            }

2.4.1.2ID selector

#l1 {
    background-color: blueviolet;
}
What needs to be explained here is that you cannot use a pure number as the id, otherwise the rendering will not succeed

2.4.1.3 Class selector

 .a1{
            color: cadetblue;
        }
Note that this is the class name {contents in the class}

2.4.1.4 Universal selector

*{
            color: cadetblue;
        }
*Refers to all, the meaning here is to make all the elements become the specified color

2.4.2 Combination selector

2.4.2.1 Descendant selector

The tags inside a tag can all be called descendants of this tag.

<div id="l2" class="a1">I am div
<p id="l1">I am the p tag
</p>
    <div>I am the second generation div
    <div>I am the third generation div</div>
    </div>
</div>
Both p and div in the first div are descendants of the first div.
div div{
            color: aquamarine;
        }
The divs in the first div are all set to the color of color. Pay attention to the characteristics of the descendant selector, label name + space + label name of descendants.
Here all the tags in the second div will be set to color.

2.4.2.2 Son selector

div>div{
            color: aquamarine;
        }
    </style>
The son selector is father name> son name. If the names of the offspring are the same, they are all set to the color of color. If the label of the son’s offspring is not the same label name as the son, only the son label is set.

2.4.2.3 Brother selector

 div~p{
            color: aquamarine;
        }
Set all p under the div to the color of color, as long as it is under the div, no matter how many times it is, it will be set to the color of color

2.4.2.4 Adjacent selector

div+p{
            color: aquamarine;
        }
Only set the color of the p immediately below the div, if there is no p below the div, do not set it.

2.4.3 Attribute selector

Used to select elements with specified attributes (such as id, attribute name = attribute value, attribute name, etc.).

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>[name='p1']{
        color: blue;
    }</style>
</head>
<body>
<p name="p1">p1</p>
<p name="p2">p2</p>
<p name="p3">p3</p>
    Fill in the attributes of the element to be selected in [].
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>[pname]{
        color: blue;
    }</style>
</head>
<body>
<p name="p1">p1</p>
<p pname="p2">p2</p>
<p name="p3">p3</p>
</body>
</html>

2.4.4 Grouping and Nesting

Grouping : When the styles of multiple elements are the same, we don't need to set the styles for each element repeatedly. You can use comma-separated grouping selectors between multiple selectors to uniformly set the element styles.

Such as:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>[name='p1'],[pname]{
        color: blue;
    }</style>
</head>
<body>
<p name="p1">p1</p>
<p pname="p2">p2</p>
<p name="p3">p3</p>
</body>

Nesting : multiple selectors are mixed and used

2.4.5 Pseudo-class selector

Mainly set the link color action of the link (it should be noted here that hover must be after visited)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*Link color when not visited*/
        a:link{
            color: ghostwhite;
        }
       /*Color of visited links*/
        a:visited{
            color: darkslateblue;
        }
       /*The color displayed when the mouse moves over the link*/
        a:hover {
            color:red;
        }
       /*The color of the link when the mouse is clicked and not released*/
        a:active{
            color: blue;
        }

       /*The color when the input box gets the focus*/
        input:focus{
            background-color: ivory;
        }

        span:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
<a href="https://www.mi.com/">Click me</a>
<input type="text">
<span></span>
</body>
</html>

2.4.6 Pseudo element selector

first-letter

Control the size of the first word in the label. The first word in a scene such as a newspaper or a novel is relatively large.

 p:first-letter{
        font-size: 60px;
        color: aqua;
    }

Before inserts the specified character at the top of the content. This character cannot be selected when displayed. After using this, the above first-letter cannot be used.

p:before{
        content: "*";
        color: chartreuse;
    }

after inserts the specified character at the end of the content, which is not optional

 p:after{
         content: "#";
        color: fuchsia;
        }

After and before are mostly used to clear floats.

2.4.7 Priority of selectors

  1. In the case of the same selector, the method of introducing the label is different, and the principle of proximity is followed. Whoever is closer to the label uses whoever.
  2. In the case of different selectors

In-line selector>id selector (used more)>class selector (used more)>element selector

Reference: https://cloud.tencent.com/developer/article/1554232 Front-end form and css (1)-Cloud + Community-Tencent Cloud