Summarize some uses of HTML form

HTML form tag summary

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

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

##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>

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!