Detailed analysis of HTML and CSS in Javaweb

2.4 Table tag

Scenario: Display data neatly in the form of tables (rows and columns) on web pages. In some management systems, we will see that data is usually presented in the form of tables, such as: Class schedule, student schedule, course schedule, grade schedule, etc.

Tag:

  • : used to define the entire table, which can wrap multiple

    s. Commonly used attributes are as follows:

    • border: Specifies the width of the table border

    • width: specifies the width of the table

    • cellspacing: Specifies the space between cells

    • : table row, can wrap multiple

    		• : table cell (normal), which can wrap content. If it is a header cell, it can be replaced with

    Demo:

    code show as below:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Table</title>
    <style>
        td{
            text-align: center; /* Center the cell content */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>Serial number</th>
            <th>Brand Logo</th>
            <th>Brand name</th>
            <th>Company name</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>Huawei</td>
            <td>Huawei Technologies Co., Ltd.</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg" width="100px"> </td>
            <td>Ali</td>
            <td>Alibaba Group Holdings Co., Ltd.</td>
        </tr>
    </table>
?
</body>
</html>

    Open the browser, the effect is as shown below:

    The integrated table is wrapped with the table tag, in which each row of data is a tr, and each cell in each row is a td. If it is a header cell, you can use th (with the effect of bold and centered display) .

    2.5 Form Tag

    2.5.1 Form

    2.5.1.1 Introduction

    As for forms, in our daily Internet use, we basically encounter them every day. For example, when we often visit a website, the login page, registration page, and personal information submission page that appear are actually forms one by one. After we enter data in these forms, as soon as we click “Submit”, the data we filled in the form will be collected and submitted. In fact, this data will usually be submitted to the server and eventually saved in the database.

    In fact, the above-mentioned window is a form, and the form is one item at a time, which we call form items or form elements.

    • Form scenario: Forms are responsible for data collection functions in web pages, such as registration and login forms.

    • Form tag:

    • Form properties:

      • action: Specifies where to send form data when the form is submitted, and the URL of the form submission.

      • method: Specifies the method used to send form data, common ones are: GET, POST.

        • GET: The form data is spliced behind the URL, such as: xxxxxxxxxxx?username=Tom & age=12. There is a limit to the size of the form data that can be carried in the URL.

        • POST: Form data is carried in the request body (message body), and there is no size limit.

    • Form item labels: different types of input elements, drop-down lists, text fields, etc.

      • input: Define form items and control the input form through the type attribute

      • select: define drop-down list

      • textarea: define text area

    2.5.1.2 Demonstration

    1). Form submitted by GET method

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Form</title>
</head>
<body>
    <!--
    form form attributes:
        action: URL for form submission, where to submit data. If not specified, it will be submitted to the current page by default.
        method: The form submission method.
            get: splice the form data after the url, for example: ?username=Tom & age=12, the url length is limited. Default value
            post: passed in the message body (request body), the parameter size is unlimited.
    -->
    
    <form action="" method="get">
        Username: <input type="text" name="username">
        Age: <input type="text" name="age">
?
        <input type="submit" value="Submit">
    </form>
    
</body>
</html>

    After the form is written, open the form through a browser, enter the values in the form items, and click Submit. We will see that the form data is submitted to the server after the URL, in the format: ?username=Tom &age =12.

    2). Submit the form via POST method

    Change the above form submission method from get to post

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Form</title>
</head>
<body>
    <!--
    form form attributes:
        action: URL for form submission, where to submit data. If not specified, it will be submitted to the current page by default.
        method: The form submission method.
            get: splice the form data after the url, for example: ?username=Tom & age=12, the url length is limited. Default value
            post: passed in the message body (request body), the parameter size is unlimited.
    -->
    
    <form action="" method="post">
        Username: <input type="text" name="username">
        Age: <input type="text" name="age">
?
        <input type="submit" value="Submit">
    </form>
    
</body>
</html>

    After the form is written, open the form through a browser, enter the values in the form items, and click Submit. We will see that the form data is submitted to the server after the URL, in the format: ?username=Tom &age =12.

    2.5.1.3 Notes

    For all form items in the form, in order to collect data normally and submit it to the server when submitting, the form items must specify the name attribute. Otherwise, the form item cannot be submitted.

    Username: <input type="text" name="username">

    2.5.2 Form items

    2.5.2.1 Introduction

    There can be many form items in a form, and although the form items come in various forms, there are actually only three form item labels, which are:

    • : form item, control the input form through the type attribute.

      type value Description
      text Default value, define single-line input field
      password Define password field
      radio Define radio button
      checkbox Define checkbox
      file Define file upload button
      date/time/datetime-local Define date /Time/DateTime
      number Define number input box
      email Define email input box
      hidden Define hidden field
      submit / reset / button Define submit button/reset button/clickable button