Inline and table elements

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)

Keywords: html

Added by j4mes_bond25 on Thu, 25 Nov 2021 00:17:06 +0200