HTML form tag summary

    最近研究 form标签，有一些小心得写下来与大家分享分享，共勉。在小结的最后有一个form表单的小例子，可以作为参考。                                                    -----DanlV

Copy after login

form是HTML的一个极为重要的功能标签之一。

Copy after login

##Input field input

input type The attributes have the following attribute values:
1.button button (more details below)
2.file is used for file selection
3.hidden hidden field, which can realize hidden operations
4.text Used for text input
5.password input with password
6.radio radio button, the same name attribute is a group
7.checkbox multi-select button, the name attribute is the same group
8.image image form submit button
9.reset reset form button
10.submit submit form button
alt attribute, defined when the button image , the alternative text of the slide
src attribute, which defines the link address of the image when the button is an image
checked attribute, which defines the default option
The value of checked is true or false, or it can be written directly as checked
disabled attribute to disable the current Input field (usage as checked)
readonly attribute, read-only for the current input field, the actual function is the same as disabled, but the displayed effect is different (usage as checked)
maxlength attribute, defines the maximum length of input field characters
name attribute, defines the name of the current input field
value attribute, defines the default value of the current input field

Text input area textarea

rows attribute, specifies visible rows Number
cols attribute, specifies the number of visible columns

Button button

1.type="button"General function button
2.type="submit"Submit form form Function button
3.type="reset"Reset form form function related function button

Down menu select

1.disabled attribute, disable the menu
2.multiple attribute, stipulates that multiple items can be selected at the same time
3.name attribute, drop-down The name of the list
4.size attribute, the number of visible items in the menu

Tag

, defines the option grouping of the drop-down list, the attribute is ：

5.label attribute, defines the label (name) of the option group, required attribute 6.disabled attribute, disabled

Attribute, defines the options in the drop-down list (this label is in the

label), the attributes are: 1.disabled attribute, disables 2.label attribute, defines when using

##The label in the form

In order to make the input more user-friendly and improve the user experience, When clicking on the prompt text, the cursor will automatically focus on the input position. Use this label. There are two ways to use it:

Put the input directly into the label. There is no need to use the for attribute, which is recommended.
---Group related elements in the form fieldset

To group related elements in the form, use

Code Example

        <form action="" method="post">
            <fieldset>
                <legend>天下第一争霸赛</legend>    
                    
            <label > 门派： <input type="text" name="menpai" id=""></label>
            <br><label >密码： <input type="password" name="psw" id="">    </label>
            <br><label >上传你的请柬： <input type="file" name="qingjian" id=""></label>
            <br>选武器： <input type="radio" name="arms" id="">刀
                        <input type="radio" name="arms" id="">剑
                        <input type="radio" name="arms" id="">枪
                        <input type="radio" name="arms" id="">鞭
            <br>挑战对手： <input type="checkbox" name="Army" id="">梅超风
                            <input type="checkbox" name="Army" id="">洪七
                            <input type="checkbox" name="Army" id="">金毛狮王谢逊
                            <input type="checkbox" name="Army" id="">张三丰
            <br><label > 选择你的门派：<select name="" id=""  >
                <optgroup label="西域">
                    <option value="天山">天山派</option>
                    <option value="昆仑">昆仑派</option>

                </optgroup>
                <optgroup label="中原" >
                    <option value="峨眉">峨眉派</option>
                    <option value="少林">少林派</option>
                    <option value="武当" selected>武当派</option>
                    <option value="天龙">天空派</option>
                    <option value="星宿">星宿派</option>
                    <option value="逍遥">逍遥派</option>
                    <option value="丐帮">丐帮派</option>
                    <option value="五毒">五毒派</option>
                    <option value="明教">明教派</option>
                </optgroup>


            </select></label>
            <br> <input type="image" src="" alt="假装有图片">
            <br> <input type="reset" value="重置"> <input type="submit" value="确定">
            </fieldset> 
        

        </form>

Copy after login

The above is the detailed content of Summarize some uses of HTML form. For more information, please follow other related articles on the PHP Chinese website!