HTML self-study notes (HTML frame + form Design)

Source: Internet
Author: User

HTML framework
    1. What is a frame: dividing the browser into different parts, each loading a different page to achieve the effect of loading multiple pages in the same browser window.
    2. <frameset> Dividing frame markers.
      1. Syntax Format:<frameset>...</frameset>
      2. Property:
        1. COLS uses "pixel value" and "%" to split the left and right windows, "*" for the remainder. Using "*,*,*" means that the frame is divided evenly into 3. Using "*,*" means that the frame is divided evenly into 2.
        2. Rows uses the "pixel value" and "%" to split the upper and lower windows, "*" for the remainder.
        3. Framborder Specifies whether the border is displayed. <framborder= "0" > not displayed; <framborder= "1" > Display.
        4. Border set the size of the border, the default value is 5px
    3. 3.<frame> child window tag, single mark. The tag must be used in <frameset>, and several windows in <frameset> must correspond to several <frame> frames. You must also specify a Web page by using the SRC attribute.
      1. Syntax Format: <frame property = "attribute value" >.
      2. Property:
        1. src loads the URL address of the Web page file.
        2. The name of the frame, which is the target parameter of the link tag.
        3. Noresize indicates that the frame size cannot be resized and can be adjusted without setting it.
        4. Scrolling whether scroll bars are required

Value:

      1. Auto adjusts as needed
      2. Yes there is
      3. No no No

5.<frameborder> Whether you want the border <frameborder= "1" > Display border, <frameborder= "0" > do not show borders.

4. Other Related tags

        • <code> indicates that text content that the computer source code or other machine can read </code> also displays text as a width-equal typeface.
        • <pre> defines pre-formatted text, and the text that is enclosed in the pre element usually preserves spaces and line breaks. The text will also appear equal width words.
        • <tt> render equal-width text effects
        • <address> tags define the author contact information for a document or article.
          • If the <address> element is within the <body> element, it represents the document contact information
          • If the <address> element is within the <article> element, the contact information for the article

Note: text in an element is usually rendered in italics. Most browsers add lines before or after an address element

HTML Form Design
    1. Form markers:<form> Define the start and end positions of the form, and the contents of the form when it is submitted are the contents of the form </form>
      1. Syntax format: <form action= "server-side address (address that accepts form content)" name= "form name" method= "Post/get (transfer mode)" >...</from>
      2. Common Properties:
        1. When the Get:get method is submitted, the contents of the form are appended to the URL address, so the length of the submission is limited to 8,192 characters and is not confidential.
        2. When Post:post commits, the data of the form is included in the form body together and transferred to the server for processing, with no data size limit.
        3. Action: The URL address of the handler for the form data, or the URL address of the current document if it is empty, and if the Action property is not required in the form, specify its property as "0"
        4. Target: Similar to hyperlink properties, used to specify the target window.
    2. <input> text field and password field, no end tag.
      1. Syntax format: <input type= "" value= "" size= "" maxlength= "specifies the maximum length of the input field, in number of characters" >
        • ,<input> represents an input text field when type= "text"
        • When type= "Password",,<input> represents a password input domain.

2. Common Properties:

        • Name defines control names
        • Value initializes the contents of the text box when the browser is opened
        • Size sets the length of the control
        • MaxLength the maximum allowable input character in the input box

3. Use of buttons

    1. Submit button, when <input type= "Submit" >;
    2. Reset button, when <input type= "reset" >;
    3. Normal button, when <input type= "button" >;
    4. radio button: When <input type= "Radio" >;
    5. Check button: When <input type= "checkbox" >.

Note: Both the radio button and the Check button can use the Checked property to set the default entry. When the Name property is the same, select one of two.

Such as:

Gender: <input type= "Radio" name= "Sex" > Male

Gender: <input type= "Radio" name= "Sex" > Female

4. Hidden fields: When <input type= "hidden" >;

5. Multiline Text fields:

Usage: You can use the <textarea> tag to implement a field that can enter multiple lines of text.

Format: <textarea name= "name" rows= "value" cols= "value" value= "value" >...<textarea>

Note: The rows and Cols properties are used to specify the number of rows and columns to display, in units of characters.

6. Menu drop-down list field <select>

Syntax format: <select name= "" size= "value" multiple= "value" >

<option value= "" selected= "selected" > Options 1</option>

<option value= "" selected= "selected" > Options 2</option>

<option value= "" selected= "selected" > Options 3</option>

</select>

<HTML><Head>    <title>frames for Web pages</title>    <MetaCharSet= "Utf-8"></Head>    <Framesetrows= "90,*,90"frameborder= "1"Border= "1"noresize= "Noresize">        <Framename= "Top"src= "top.html"/>            <Framesetcols= "20%,80%">                <Framename= "Left"src= "left.html"/>                <Framename= "Right"src= "right.html"scrolling= "No"/>            </Frameset>        <Framename= "Bottom"src= "bottom.html"/>    </Frameset></HTML>

  

HTML self-study notes (HTML frame + form Design)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.