Introduction to HTML basic controls_PowerNode Java Academy

The <input> tag

The <input> tag is used to collect user information.

The type attribute

Depending on the value of the type attribute, the input field can have many forms. Can be a text field, check box, masked text control, radio button, push button, etc.

text: text area

readonly attribute: whether it is read-only.

password: Password area, the input text is displayed with '*'

checkbox: checkbox

checked attribute: whether it is selected;

radio: single selection box;

name attribute: specifies multiple radio buttons to be selected in one area

reset: reset all tags in the current <form> form to the initialization state (such as clearing the text area content)

submit: Submit the current <form> form information to the specified page

button: normal button

Value attribute: the text displayed by the button

file: file selection tag

Hide: Hidden area, where you can store some information that is not displayed to users but is used by yourself

image: image 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

<select> Tag

You can create single-select or multi-select menus, similar to winform's combox or listbox.

property

1) size {int}: sets the size of the drop-down list. The default style is combox; when it is greater than 1, it is listbox style.

2) multiple {boolean}: whether to select multiple items. If you want to select multiple items, press Ctrl+left button to perform multiple selection operations.

3) item sub-item:

① <optgroup> tag: defines the category of options and cannot be selected.

label {string} attribute: the name of the category to be displayed title {string} attribute: the information to be displayed when the mouse moves over the selected item

② <option> tag: defines optional items

vlaue {string} Attribute: The specific name of the option title {string} Attribute: The information to be displayed when the mouse moves over the option

Example

<h3>Select Tag</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="Municipality" ></optgroup>
    <option value="bj" title="北京" >Beijing</option>
    <option value="sh">Shanghai</option>
    <optgroup label="Province and City" ></optgroup>
    <option value="zj">Zhejiang</option>
    <option value="fj">Fujian</option>
</select>

<textarea> Tag

For multi-line text areas, you can set the size of the textarea using the cols and rows attributes.

property

rows {int}: indicates the number of rows to display.
cols {int}: indicates the number of columns to display.
readonly {boolean}: whether to read only.

Example

The <label> tag

Equivalent to a display text box.

property

for {elementID}: Associates the corresponding control ID; when this label is clicked, the control bound to the ID will get the focus;

<table>
    <tr>
        <td><label for='username'>Name:</label></td>
        <td><input type="text" id='username'/></td>
    </tr>
    <tr>
        <td><label for='userpwd'>Password:</label></td>
        <td><input type="password" id='userpwd' /></td>
    </tr>
</table>

Example

<fieldset> Tag

Similar to the groupBox control in winform.

item

<legend></legend>: indicates the name of the heading.

<h3>Fieldset Tag</h3>
<fieldset style='width:130px' >
    <legend>Gender</legend>
    <input type="radio" name='sex' value='boy' />Male<input type="radio" name='sex' value='girl' />Female</fieldset>

Example

ul, ol, li list tags

ul ：unordered list

ol ：ordered list

li: 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>

property

type {string}: defines the symbol style before the <li> tag.

ul: type includes: circle (hollow circle), disc (filled circle), square (filled square), none: no sign in front;

ol: type has: 1: represents the ordered 1, 2, 3; a: represents the ordered a, b, c; i: Roman numerals i, ii, iii; although it can also be defined as: circle, disc, square, none, but in reality they are all sequences such as 1, 2, 3;