Summarize some uses of HTML form

零下一度
Release: 2017-06-25 09:46:12
Original
1528 people have browsed it

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


  • ##disabled attribute, disables the current text input area
  • name attribute, the name of the current text area
  • readonly attribute, the current text area is read-only
Button button

    There are three type types:
  • 1.type="button"General function button

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


  • disabled attribute, disable this button
  • name attribute, the name of the button
  • value attribute, the default value of the text content displayed on the button
Down menu select

    Related attributes:
  • 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:

    This method uses the for attribute of label, and the value specifies the name of the input area
  • 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

  • Label defines the group title. See the last code for relevant examples.

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template