Shulou(Shulou.com)06/01 Report--

This article mainly explains the "HTML how to develop single topic page", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's train of thought slowly in depth, together to study and learn "HTML how to develop single topic page" bar!

Form

Table tags (forms),

Tr tags (lines),

Td tags (standard cells),

Caption tag (title),

Th tag (header cell).

In order to further semantic the table, HTML introduces three tags: thead, tbody and tfoot.

These three tags divide the table into three parts: header, body and footer.

Table form

Caption title

Thead header (semantic partition)

Tbody body (semantic partition)

Tfoot footer (semantic partition)

Tr Lin

Th header cell

Td table cell

Name, Chinese, English, mathematics

Xiao Ming 808080 Xiao Hong 909090 Xiao Jie 100100100 average 909090

Table style beautification

Table, th, td {

Border: 1px solid black

Border-collapse: collapse

}

Th, td {

Padding: 6px

Color: blue

}

Add borders to the table and set the font color

And set some padding for the cell

Form

The form is to collect user information, which is for the user to fill in and choose.

All the contents of the form should be written in the form tag

Form means English form. You can add text boxes, password boxes, radio buttons, check boxes, drop-down lists, buttons, text fields, etc., to the form.

1. Text box

two。 Password frame

3. Radio button for men and women

If the value of type for input is radio, it is a radio button.

It is important to note that radio buttons must have the same name property for radio buttons to be mutually exclusive.

Label tag

Male

Female

The input element needs to have an id, and then the label tag has a for attribute, which is the same as id, which indicates binding, and the label has a binding relationship with input. Click the text in the label tab to select the corresponding radio box

5.4. Check box to sleep

Eat

Check box, preferably with the same name (to make it easier for the server to collect information selected by the user).

5. Drop-down list

Eat

sleep

Beat beans

Select is "choice".

Select tags, like ul, ol and dl, are group tags.

Option "options".

6. Text field

The cols attribute represents the columns "column"

The rows attribute represents a rows "line".

Values are numbers that represent the number of rows and columns. The text in the middle of the label pair is the text that appears in the text box by default, and generally there is no need to write.

7. Button

Ordinary button

Button means "button" in English. The "value" of value is the text displayed on the button.

Submit button

Submit means "submit" in English. This button does not need to write value to automatically have "submit" text. Click this button and the form will be submitted to the server.

Reset button

Reset means "reset" and "reset", and you can reset the values filled in the previous form elements.

Read-only and disabled

Project actual combat

Make a product search form

Search-form.css.search {

Height: 40px

Width: 420px

Margin: 0 auto

Margin-top: 60px

}

.search .input {

Border: 3px solid red

Width: 300px

Height: 36px

Font-size: 20px

}

.search .btn {

Height: 44px

Width: 100px

Border:0

Background-color: red

Color: white

Font-size: 18px

Font-weight: bold

Margin-left:-4px

Vertical-align: top

Letter-spacing: 6px

}

Youlu-search-form.html

Document

Thank you for your reading, the above is the content of "HTML how to develop the single topic page", after the study of this article, I believe you have a deeper understanding of how to develop the single topic page of HTML, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.