Form drop-down list, multiline text, hidden fields

Source: Internet
Author: User

<select> drop-down box

Used to define a drop-down list, the option label in the SELECT element is used to define the optional list.

Property:

disabled= "Disabled" to disable the drop-down list (also available elsewhere, the content will be disabled)

Name rule drop-down list (general background staff will give you)

SIZE specifies the number of options available in the drop-down list (displays a few lines, typically showing only one row)

Selected this item is selected by default

Example:

<select name= "area" disabled= "diseabled" size= "2" >

<option value= "1" selected> Beijing </option> (value is submitted to the backend server, the submission is a value, the background staff will give you, generally write English or numbers, rarely write Chinese characters will be garbled )

<option value= "2" > Shanghai </option>

</select>

<option> drop-down box list items

The browser displays the contents of the <option> tag as a menu of <select> tags or as an element in a scrolling list. The option element is inside a SELECT element.

Property:

disabled= "Disabled" specifies that a list cannot be selected

Selected= the "selected" option (when first shown in the list) is selected by default

Value defines the selection to be sent to the server

  

Use Optgroup to group option, specify the name of the group by label, and the name in Optgroup is not selectable.

<textarea> Multiple lines (multiline text field)

Tags define multiple lines of text input, the text can accommodate an unlimited number of text in the area, you can specify the size through the cols and rows properties, but the better way is to use the height and width of the CSS property, textarea there is a space in the middle of thecontent, The Required property does not take effect.

Property

Cols= "30" width

Rows= "10" Height

PLACEHOLDER a short hint that describes the expected value of the text area (that is, what information you are prompted to write)

READONLY Specifies that the text area is read-only (not checked, not filled in)

Required the text area is mandatory and cannot be used with ReadOnly

Multiple lines of text can be dragged to change the size, if you do not want your layout to be changed, you can use CSS to control: Style "Resize:none;"

Example:

<textarea placeholder= "Please fill in your information" required></textarea> ( no spaces and line breaks in the middle)

<input type= "Submit"/>

The content must be filled in, because there are required if not filled: there will be a hint.

Hidden fields <input type= "hidden" >

Defines the hidden input fields, which are invisible to the user in the page. The purpose of inserting a hidden field in a form is to phone or send information so that it can be used by programmers working on the form.

Sometimes we have to give users a message that they can submit the form to determine the user's identity. This is the right time to use hidden fields.

Hidden fields use the name and Value property to specify the parameter name and the value of the parameter

<foem action= "" >

<input type= "hidden" name= "hide the life of the domain" value= "hide the value of the field"/>

<input type= "Submit"/>

</form>

Summary of form Labels

1 form fields need to add the Name property to submit data to the server only if you do not want to commit the name, such as button.

2 radio buttons and check buttons

Name is the same as a group

A group of radio buttons can only select one button

3 The difference between post and get mode ~

Form drop-down list, multiline text, hidden fields

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.