form <form> consists of form elements. Common form elements have the following types of markup: input field marker <input>, select domain marker <select> and <option>, text field marker <textarea> and so on.
This chapter focuses on the input field marker <input>.
Input field Markers <input>
Enter field markers <input> is one of the most commonly used tags in the form. Common input field markers <input> have text boxes, buttons, radio buttons, check boxes, and so on.
The syntax format is as follows:
<form><input name= "file_name" type= "Type_name" ></form>
The argument name refers to the name of the input field, and the parameter type is the type of the input field. The following types of input fields are available in the <input....type= "" > tag, which allows the user to determine the type of use, depending on their needs, with the type attribute.
Type attribute value and example and description:
1. Text
Instance:
<input name= "User" type= "text" value= "Drink" size= "maxlength=" >
Description: Name is the title of the text box, value is the default value for the text box, size refers to the width of the text box, in characters, and maxlength refers to the maximum number of input characters for the text box.
2. Password
Instance:
<input name= "pwd" type= "password" value= "123456" size= "8" maxlength= ">"
Description: The password field, where the user enters characters in the text box will be replaced with "*" to act as a secret.
3. File
Instance:
<input name= "file" type= "file" enctype= "multipart/form-date" size= "maxlength=" >
Description: The file domain, when the file is uploaded, can be used to open a modal window to select a file. Then upload the file to the server via the form, such as uploading word files. It is important to note that uploading a file requires specifying the form's properties enctype= "Multipart/form-date" to implement the upload function.
4. Radio
Instance:
<input name= "Sex" type= "Radio" value= "male" checked> male <input name= "sex" type= "Radio" value= " Female "> Female
Description: Radio button for setting a set of selections, the user can only select one item, the Checked property is used to set the radio button to be selected by default.
5. CheckBox
Instance:
<input name= "goods" type= "checkbox" value= "book" checked= "Checked" > Books <input name= "goods" type= " CheckBox "value=" fruits "> Fruit <input name=" goods "type=" checkbox "value=" Food "> Foods
Description: check box to allow the user to select multiple selections. The Checked property is used to set the single check box to be selected by default. For example, when collecting personal information, you need to make multiple selections in your preferences.
6. Submit
Instance:
<input name= "submitted" type= "Submit" value= "Submission" >
Description: Submit the contents of the form to the server.
7. Reset
Instance:
<input name= "reset" type= "reset" value= "reset" >
Description: Clears and resets the contents of the form, which clears the contents of all text boxes in the form and restores the selection menu item to its original value.
8. Button
Instance:
<input type= "button" value= "Hello world!" >
Description: The button can fire the action of submitting the form. You can restore the form to its original state when the user needs to modify the form, as well as perform other functions as required by the program. Normal buttons are typically used in conjunction with JavaScript scripts for form processing.
9.hidden
The examples are as follows:
<input type= "hidden" name= "id" >
Description: A hidden field that is used to implicitly submit variable values in a form. Hidden fields are not visible to users in the page, and the purpose of adding hidden fields is to collect or send information in a hidden way. When a browser clicks the Send button to send the form, the information for the hidden field is also sent to the processing page specified by the action.