PHP form elements Introduction to the input field tag <input>

Source: Internet
Author: User
Tags php form
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.