Today’s content:

  1. HTML tags: Form tags

  2. CSS:

HTML tags: Form tags

  • Form:
    • Concept: used to collect user input data. Used to interact with the server.
    • Form: Used to define the form. You can define a range that represents the range in which user data is collected

      • Properties:

        • Action: Specifies the URL to submit data
        • Method: specifies the submission method
          • Classification: altogether 7 kinds, 2 kinds are more commonly used
            • The get:
              1. The request parameters are displayed in the address bar. Is encapsulated in the request line (explained later on HTTP protocol).
              2. The request parameter size is limited.
              3. It’s not very safe.
            • Post: 2. Request parameters are no longer displayed in the address bar. 2. There is no limit to the size of a request parameter. 3. Relatively safe.

      • For data in a form item to be submitted: it must specify its name attribute

    • Form item tag:
      • Input: You can change the presentation style of an element by using the type attribute value

        • The type attribute:

          • Text: Indicates the text input field. Default value

            • Placeholder: Specifies input box prompts, which will be automatically cleared when the input box changes

          • Password: password input box

          • Radio: single box

            • Note:
              1. For multiple checkboxes to have the same effect, the name property must have the same value.
              2. Each checkbox is typically provided with a value attribute that specifies the value to submit when it is selected
              3. Checked property, which can specify a default value

          • Checkbox: indicates the checkbox

            • Note:
              1. Each checkbox is typically provided with a value attribute that specifies the value to submit when it is selected
              2. Checked property, which can specify a default value

          • File: indicates the file selection box

          • Hidden: A hidden field, used to submit some information.

          • Button:

            • Submit: Indicates the submit button. You can submit a form
            • Button: common button
            • Image: button for submitting an image
              • The SRC attribute specifies the path of the image

        • Label: indicates the text description of the input item

          • Note:
            • The for attribute of label generally corresponds to the ID attribute value of input. If so, clicking on the Label field gives the input field focus.
      • Select: drop – down list
        • Child element: option, which specifies the list item
      • Textarea: text field
        • Cols: Specifies the number of columns, how many characters are in each line
        • Rows: The default number of rows.

CSS: Page beautification and layout control

  1. Cascading Style Sheets concept: Cascading Style Sheets

    • Cascade: Multiple styles can be applied to the same HTML element simultaneously

  2. Benefits:

    1. powerful
    2. Separate content presentation from style control
      • Reduce coupling. The decoupling
      • Make it easier to work with others
      • Improve development efficiency

  3. Use of CSS: THE combination of CSS and HTML

    1. Inline style
      • Use the style attribute inside the tag to specify the CSS code
      • Such as:
        hello css
    2. Internal style
      • Inside the head tag, define the style tag. The body of the style tag is the CSS code
      • Such as: div {color: blue; }
        hello css
    3. External style
      1. Define CSS resource files.
      2. Inside the head tag, define the link tag to import external resource files
      • Such as:
        • C ss file: div{color:green; }
        hello css
        hello css
    • Note:
      • CSS functions in more and more ways
      • 1 is not commonly used. 2,3 is commonly used in the later stage
      • The three formats can be: @import “CSS /a.css”;

  4. The CSS syntax:

    • Format: selector {attribute name 1: attribute value 1; Attribute name 2: attribute value 2; . }
    • Selector: Filters elements with similar characteristics
    • Note:
      • Each pair of attributes needs to be used; Separate, the last pair of attributes may not be added;

  5. Selector: Filters elements with similar characteristics

    • Classification:
      1. Base selector
        1. Id selector: An element that selects a specific ID attribute value. It is recommended that the ID value be unique in an HTML page
          • Syntax: #id attribute value {}
        2. Element selector: Selects elements with the same label name
          • Syntax: Tag name {}
          • Note: ID selectors take precedence over element selectors
        3. Class selector: Selects elements that have the same class attribute value.
          • Syntax:.class attribute value {}
          • Note: Class selectors take precedence over element selectors
      2. Extension selector:

        1. Select all elements:

          • Grammar: * {}

        2. Union selector:

          • Selector 1, selector 2{}

        3. Child selector: Filters selector 2 elements under selector 1 element

          • Syntax: selector 1 selector 2{}

        4. Parent selector: Filters the parent element selector 1 of selector 2

          • Syntax: selector 1 > selector 2{}

        5. Attribute selector: Selects the element whose attribute name = attribute value

          • Syntax: Element name [attribute name =” attribute value “]{}

        6. Pseudo-class selector: Selects the states that some elements have

          • Syntax: element: state {}
          • State: state of initialization visited state: state of being visited hover state: state of the mouse

  6. attribute

    1. Font, text
      • Font size: The size of the font
      • Color: text color
      • Text-align: indicates the way
      • The line – height: line height
    2. background
      • Background:
    3. A border
      • Border: Sets the border that matches the property
    4. size
      • Width: the width of the
      • Height: height
    5. Box model: Control layout

      • Margin: the outer margin

      • Padding: Inside margin

        • By default, inside margins affect the size of the entire box
        • box-sizing: border-box; Set the box properties so that width and height are the final box size

      • Float float:

        • left
        • right

Case study:

< HTML lang="en"> <head> <meta charset=" utF-8 "> <title> <title> *{margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /* make div horizontal center */ margin: auto; } .rg_left{ /*border: 1px solid red; */ float: left; margin: 15px; } .rg_left > p:first-child{ color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ color:#A6A6A6; font-size: 20px; } .rg_center{ float: left; /* border: 1px solid red; */ } .rg_right{ /*border: 1px solid red; */ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a { color:pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /* Set the border rounded */ border-radius: 5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p> New USER registration </p> </p> </div> <div class="rg_center"> <div class="rg_form"> <! Form --> <form action="#" method="post"> <table> <tr> < TD class="td_left"><label for="username"> <td class="td_right"><input type="text" name="username" ID ="username" placeholder=" please input username" ></td> </tr> <tr> <td Class ="td_left"><label for="password"> </label></ TD >< TD class="td_right"><input type=" name="password" Id ="password" placeholder=" please input password" ></td> </tr> <td class="td_left"><label for="email"> email </label></ TD >< TD Class ="td_right"><input type="email" name="email" ID ="email" placeholder=" please input email" ></ tr> <tr> <td Class ="td_left"><label for="name"> </label></ TD >< TD class="td_right"> Placeholder = "please enter the name" > < / td > < / tr > < tr > < td class = "td_left" > < label for = "tel" > phone number < / label > < / td > < td class = "td_right" > < input Type = "text" name = "tel" id = "tel" placeholder = "please enter a phone number" > < / td > < / tr > < tr > < td class = "td_left" > < label > gender < / label > < / td > < td Class ="td_right"> <input type="radio" name="gender" value="male"> male <input type="radio" name="gender" value="female"> female </td> <tr> <td class="td_left"><label for="birthday"> </label></ TD >< TD class="td_right"><input type="date" Name ="birthday" id="birthday" placeholder=" please input date of birth "></td> </tr> <tr> < TD class="td_left"><label for="checkcode" > validation code </label></ TD >< TD class="td_right"><input type="text" name="checkcode" ID ="checkcode" placeholder=" please input validation code" >< img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" Id = "btn_sub" value = "registered" > < / td > < / tr > < / table > < / form > < / div > < / div > < div class = "rg_right" > < p > existing account? < a Immediately href = "#" > login < / a > < / p > < / div > < / div > < / body > < / HTML >Copy the code