iframe element
Usually used to embed another page in a web page
iframe replaceable element
1. Usually a line box
2. Usually what is displayed depends on element attributes
3.css does not have full control over its style
4. Features with line block boxes
Example:
<body> <a href="https://Www.baidu.com "target=" MyFrame ">Baidu</a> <a href="https://Www.taobao.com "target=" MyFrame ">Taobao</a> <a href="https://Www.douyu.com "target=" MyFrame ">dogfish</a> <iframe src="https://www.taobao.com" name="myframe" ></iframe> </body>
Form Elements
There are several elements in this series that are primarily used to collect user data
input element
1.type property: type value of input box
2.placeholder property: Display prompt text when the text box has no content
Example
<input type="text" placeholder="Please enter an account">
Many attribute values of type:
Text Plain text input box
password password box
date date Selection Box (with compatibility issues)
search search box (compatibility issues)
range Slider (to set Max and min max)
color color Input Box
number Digital Input Box
Each increment or decrement of the binary is achieved with the step property (value is number)
checbox Checkbox
Cooperate with the name attribute to make code more readable
radio radio
file Upload files (with JS code, server)
3.input element: acts as a button
type value reset is the reset button
type value button is a normal button
type value submit is submit button
4.value property: Values that can be used as input boxes
Example
<input type="reset" placeholder="Please enter an account"> <input type="button" value="Button">
select element: drop-down list selection box (with Boolean attribute)
Usually used with option elements
A label element represents a description of an element in the user interface
The optgroup element creates groupings for the options in the select element
The option element defines the items contained in the select element, the optgroup element, or the datalist element. The option element can be used in pop-ups and HTML Menu items are represented in the list of other items in the document.
Example
<p>
King Glory Hero
<select>
<optgroup label="warrior">
<option>Arthur</option>
<option>Lvpu</option>
<option>Miyamoto Tibet</option>
</optgroup>
<optgroup label="Shooter">
<option>Yuji</option>
<option>Offspring</option>
<option>Luban7</option>
</optgroup>
</select>
</p>
textarea element: text element, multiline text box
(Replaceable elements, width and height control, line box)
Button element: button element
type attribute value reset is reset button
type property value button is a normal button
type property value submit as submit button
label element: a normal element, usually used with radio and multiple selections
Example
<p>
Please select gender
<input type="radio" name="gender" id="redMale">
<label for="redMale">male</label>
<input type="radio" name="gender" id="redFormale">
<label for="redFormale">female</label>
</p>
You can associate a label element to a form element by the for attribute, which writes the id value of the form element
The above code shows the Association
If implicit associations are used, label wraps the input
<p>
Please select gender
<label>
<input type="radio" name="gender">
male
</label>
<label>
<input type="radio" name="gender">
female
</label>
</p>
datalist:Data list
The element itself is not displayed on the page and is often used with text boxes
Example
<p>
Please enter a common browser
<input type="text" list="userAgent">
</p>
<datalist id="userAgent">
<option value="Chrome">Chrome</option>
<option value="IE">IE Browser</option>
<option value="Opera">Ou Peng Browser</option>
<option value="Safari">Apple Browser</option>
<option value="Fire Fox">Firefox Browser</option>
</datalist>
form element
Usually represents an area in a document that contains interactive controls for submitting information to a Web server
Example
<form action="http://www.baidu.com/" method="get">
<p>Account number
<input type="text" name="longinid">
</p>
<p>Password
<input type="password" name="longinpsd">
</p>
<p>City
<select name="city">
<option value="1">Nanjing</option>
<option value="2">Beijing</option>
<option value="3">Tokyo</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
fieldset element: form grouping
A child element legend may be allowed under this element
Example
<div>
<h1>Modify account password</h1>
<fieldset>
<legend>account information</legend>
<p>
User Account
<input type="text">
</p>
<p>
User Password
<input type="password">
</p>
</fieldset>
<fieldset>
<legend>Essential information</legend>
<p>
User Name
<input type="text">
</p>
<p>
City
<select name="" id="">
<option value="">Lorem.</option>
<option value="">Consequuntur?</option>
<option value="">Atque?</option>
<option value="">Quidem?</option>
<option value="">Esse!</option>
<option value="">Aspernatur!</option>
<option value="">Accusamus?</option>
<option value="">Dolorum?</option>
<option value="">Eveniet.</option>
<option value="">Accusamus!</option>
</select>
<p>
</fieldset>
<button>Submit modifications</button>
</div>
Form Status
readonly: Boolean property. Represents the state of an element that cannot be edited by the user (such as a locked text input box) (Read-only, does not change the form display style, typically for text boxes)
Disabled: Boolean property. Represents any disabled element. If an element cannot be activated (such as selecting, clicking, or accepting text input) or focused, it is disabled. The element also has an enabled state in which it can be activated or focused. (Disabled or not, changes the form display style)