What are the basic controls of HTML?

This time I will bring you what are the basic controls of HTML and what are the precautions for using HTML controls. The following is a practical case, let's take a look.

Tag

Tag is used to collect user information.

type attribute

According to different type attribute values, the input field has many forms. It can be a text field, check box, masked text control,

radio button, button, etc.

text: text area

readonly attribute: whether it is read-only.

password: password area, the entered text is displayed with '*'

checkbox: check box

checked attribute: whether to check;

radio: Radio button;

name attribute: Specify multiple radio button boxes to perform radio selection operations in an area

reset: Reset all labels in the current

form to the initialized state (Such as clearing the content of the text area)

submit: Submit the current

form information to the specified page

button: Ordinary button

Value attribute: The text displayed by the button button

file: file selection tag

hide: hidden area, you can store some information that is not displayed to the user but is used by yourself

image: picture area

src attribute: specifies the path where the image is stored;

title attribute: the text displayed when the mouse moves over the image;
alt: the text displayed when the image fails to load or is closed;

Example

Tag

can create a single-select or multi-select menu, similar to winform's combobox or listbox.

Attributes

1) size {int}: Set the

drop-down list size. The default is combox style; when it is greater than 1, it is listbox style.

2) multiple {boolean}: Whether

multiple selection. For multiple selections, hold down Ctrl + left button to perform multiple selection operations.

3) item sub-item:

① label: defines the category of the selected item, which cannot be selected.

Label {string} Attribute: The name of the category display

Title {string} Attribute: Move the mouse to the selected item, the information to be displayed

② Label: Definition Optional items

vlaue {string} Attribute: The specific name of the selected item

Title {string} Attribute: Move the mouse to the selected item, the information to be displayed

<h3 id="select标签">select标签</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="直辖市"  ></optgroup>
    <option value="bj" title="北京市" >北京</option>
    <option value="sh">上海</option>
    <optgroup label="省市" ></optgroup>
    <option value="zj">浙江</option>
    <option value="fj">福建</option>
</select>

Tag

Multi-line text area, the size of the textarea can be set through the cols and rows attributes.

Attributes

rows {int}: Indicates the number of rows displayed.

cols {int}: Indicates the number of columns displayed.
readonly {boolean}: Whether it is read-only.

Example

The label

is equivalent to a display text box.

Properties

for {elementID}: associate the corresponding control id; when this label is clicked, the control bound to the id will gain focus;

<table>
    <tr>
        <td><label for=&#39;username&#39;>姓名：</label></td>
        <td><input type="text" id=&#39;username&#39;/></td>
    </tr>
    <tr>
        <td><label for=&#39;userpwd&#39;>密码：</label></td>
        <td><input type="password" id=&#39;userpwd&#39; /></td>
    </tr>
</table>

Example

<fieldset>标签
类似于winform中的groupBox控件。
item子项
<legend></legend>：表示抬头的名称。
<h3 id="fieldset标签">fieldset标签</h3>
<fieldset style=&#39;width:130px&#39; >
    <legend>性别</legend>
    <input type="radio" name=&#39;sex&#39; value=&#39;boy&#39; />男
    <input type="radio" name=&#39;sex&#39; value=&#39;girl&#39; />女
</fieldset>

Example

ul, ol, li list tags

ul: unordered list (unordered list)

ol: ordered list (ordered list))

li: list item (list item), based on the above two list sub-items.

Code example:

<ul type=circle>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>
<ol type=1>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

Attribute

type {string}: Defines the symbol style in front of the

tag.

ul: type includes: circle hollow circle, disc solid circle, square solid square, none: no sign in front;

ol: type includes: 1: indicates ordered 1, 2, 3; a: represents ordered a, b, c; i: Roman numerals i, ii, iii; although it can also be defined as: circle, disc, square, none, but in reality it is a sequence of 1, 2, 3, etc.;

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to insert a video into an HTML webpage

How to use HTML+CSS to make a mouseover You can display the secondary menu bar

How to make the front-end interface automatically clear the cache of js and css files

The above is the detailed content of What are the basic controls of HTML?. For more information, please follow other related articles on the PHP Chinese website!