HTML basic elements (4) and html elements
1. HTML framework
The framework divides browser windows into multiple sub-windows, and each sub-window can be loaded into their respective HTML documents.
* Note: The html frame set must be the same as the body, so it cannot appear at the same time!
Framework Structure label: <frameset>. Each label can define rows or columns. rows and cols can set the window values for each row or column.
If two windows are separated up and down, each of which occupies 50% of the browser window, the sample code is as follows:
<Frameset rows = "50%, 50% "> <frame src =" URL "name =" frame name 1 "/> <frame src =" URL "name =" frame name 2 "/> </frameset>
If two windows are separated between the left and right, each column occupies 50% of the browser window, the sample code is as follows:
<Frameset cols = "50%, 50% "> <frame src =" URL "name =" frame name 1 "/> <frame src =" URL "name =" frame name 2 "/> </frameset>
Content displayed when the browser does not support the framework: (insert the <noframes> label into the <frameset> label and put the text in the <body>)
<Frameset> <noframes> <body> the current browser does not support frames </body> </noframes> </frameset>
| Attribute | Attribute Value | Description |
| Rows | Px, % | Upper/lower split window |
| Cols | Px, % | Left/right split window |
| Src | Url | Page address of the framework to be loaded |
| Name | Name | Framework name |
| Scrolling | Yes, no, auto | Whether to use the scroll bar |
| Noresize | True, false | Do you want to disable the frame size change? |
| Marginwidth | Px | Left and right areas in the framework |
| Marginheight | Px | Upper and lower blank areas in the framework |
| Frameborder | 1, 0 | Show border? |
| Framespacing | 0 | The gap between the framework and the Framework |
| Border | 0 | Border |
<Iframe> embedded framework
Basic Structure: <iframe src = "URL" name = "framework name"> </iframe>
<Iframe> and <frame>Differences:
1. frame cannot be used independently from frameset, and iframe can;
2. frame cannot be placed in the body, and iframe can;
3. iframe nested in frameset must be placed in the body;
4. iframe not nested in frameSet can be used at will;
5. The frame height can only be controlled by frameset; iframe can be controlled by itself, but cannot be controlled by frameset;
6. The functions of frame and iframe are basically the same, but iframe is more flexible than frame. Frame is the framework of the entire page, and iframe is an embedded webpage element.
Generally, the link in the framework is usedTargetWhen the property is redirected to a file within the framework:
Href (the path to the opened file does not need to be changed)
_ Self --> open "default" on the Framework page"
_ Blank --> open a new page
_ Top --> open the top-level framework page
_ Parent --> open on its parent framework page
Framename --> open the page we want to open in the specified framework
2. Form
The form is defined using the <form> label to transmit data to the server.
Forms include: input text fields, textarea multi-line text fields, select drop-down boxes, and so on.
Basic Structure:
<Form action = "" method = "post" name = ""> username: <input type = "text" name = "username"/> password: <input type = "password" name = "password"/> </form>
Attributes of form labels:
1.NameSpecify the form name
2.ActionSpecify submission address
3.MethodSpecify the data submission method (get, post)
①GetDirectly put the form parameters in the URL, which is visible to the user and has low security. However, it can be used when writing a form to facilitate viewing and debugging.
②PostTo transmit form parameters to the server for processing, you can use encryption to ensure high security.
4.EnctypeSpecifies how form data should be encoded before being sent to the server
5.TargetOpen Mode
1)<Input>Input box
* All input labels should be nested in <form> to ensure the display effect.
| Attribute | Description |
| Type | Input element type |
| Name | Input element name |
| Value | Input element value |
| Size | Input element width |
| Readonly | Read-only or not |
| Maxlength | Length of the input character |
| Disabled | Disable? |
○ Text box
User name:
<input type="text" name="username" value="" />
○ Password box
Password:
<input type="password"name="password" value="" />
○ Single-choice button
MaleFemale
<Input type = "radio" name = "sex" value = "1"/> male <input type = "radio" name = "sex" value = "0"/> female
○ Check box
Listen to musicWatch moviesPlay games
<Input type = "checkbox" name = "love" value = "music"/> listen to music <input type = "checkbox" name = "love" value = "movie"/> watch movies <input type = "checkbox" name = "love" value = "game"/> play games
○ Button
Normal button: <input type = "button" name = "btn" value = "OK"/> submit button: <input type = "submit" name = "submit" value = "submit"/> Reset button: <input type = "reset" name = "reset" value = "reset"/> image buttons: <input type = "image" name = "img_btn" src = "URL"/>
○ Hide a domain
Hidden fields are used when a program sends a message without requiring users to view specific values.
<input type="hidden" name="uid" value="10"/>
○ File Upload
<input type="file" name="photo"/>
○ Numeric keypad
Mobile phone number: <input type = "number" name = "phone"/>
○ Color selector
<input type="color" name="color"/>
○ Date Selector
<input type="date" name="date"/>
○ Time Selector
<input type="time" name="time"/>
○ Date and Time Selector
<input type="datetime-local" name="datetime-local""/>
○ Month Selector
<input type="month" name="month"/>
○ Week Selector
<input type="week" name="week" />
○ Email address text box
<input type="email" name="email"/>
○ Slide
<input type="range" min="0" max="10" value="0"/>
○ Search box
<Input type = "search" name = "search"/> <input type = "submit" name = "submit" value = "search"/>
○ Address input box
<Input type = "url" name = "url"/> <input type = "submit" name = "submit" value = "submit"/>
○ Automatic completion (New HTML5 attributes, please copy the code to view the effect)
<Input type = "search" name = "keywords" autocompulete = "on"> <input type = "submit" name = "submit" value = "submit"/>
* Automatically allows the browser to predict the input of fields. When you start typing a field, the browser displays the entered options in the field based on the previously typed value.
○ Automatic focus (New HTML5 attributes, please copy the code to view the effect)
<Input type = "search" name = "keywords" autofocus = "on"/> <input type = "submit" name = "submit" value = "submit"/>
* Specifies that when a page is loaded, the button automatically obtains the focus.
○ Prompt text (placeholder text) (HTML5 new attribute, please copy the code to view the effect)
Username: <input type = "text" name = "username" placeholder = "Enter the username..."/>
* This prompt is displayed when the input field is empty and disappears when the field obtains focus.
○ Required (HTML5 new attribute, please copy the code to view the effect)
2)<Textarea>Multi-line text fields
<textarea name="content" rows="5" cols="50"> </textarea>
* Rows specifies the height of the text box, And cols specifies the width of the text box, in the unitCharacter.
3)<Select>Drop-down list
SelectDongguanGuangzhou
<Select name = "city"> <option value = "0"> select </option> <option value = "dg"> Dongguan </option> <option value =" gz "> Guangzhou </option> </select>
* The <option> label in <select> element is used to define available options in the list.
| Attribute | Description |
| Name | Name of the drop-down list box |
| Size | Number of lines displayed in the drop-down list box |
| Multiple | Select multiple |
| Disabled | Disable? |
| Selected | Set the selected options by default |
| Value | Option value |
4)<Optgroup>Drop-down box Group
<Optgroup> the tag defines the option group. It is easier to combine related options.
GuangzhouBeijingShenzhenZhuhai
<Select name = "city"> <optgroup label = "Main city"> <option value = "1"> Guangzhou </option> <option value = "2"> Beijing </option> </optgroup> <optgroup label = "Other Cities"> <option value = "3"> Shenzhen </option> <option value = "4"> Zhuhai </ option> </optgroup> </select>
* Label specifies the name of the combination Option
5)<Label>
<Label> the label is used to associate the input items or options with the label text.
MaleFemale
<Input type = "radio" name = "sex" value = "1" id = "male"/> <label for = "male"> male </label> <input type = "radio" name = "sex" value = "0" id = "female"/> <label for = "female"> female </label>
*Note:: Put"For"The attribute value is set to related element"Id"Attribute value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
