Dragon Boat Festival small holiday--front-end Basics 02 interacting with the browser, form labels

Source: Internet
Author: User

    • The form interacts with the user and uploads the browser's data to the server side, which is the equivalent of a container

Syntax: <form method = "Delivery method" action = "Server file" >

Explanation: Method: The way data is transmitted (Get/post), action: where the data entered by the browser is transmitted, such as a page

    • Text/Password input box

Grammar:<form>

<input type= "text" name= "name" value= "literal"/>

<input type= "password" name= "name" value= "Text" >

</form>

Explanation: 当type="text"时,输入框为文本 input Box ;  当type="password"时,输入框为密码输入框;name:为文本框命名,以备后台程序ASP 、PHP使用。value:为文本输入框设置默认值。(一般起到提示作用)

    • Multi-line text input box

Syntax: <textarea rows= "number of rows" cols= "columns" > Text </textarea>

Explanation: The Testarea label is paired, Cols is the number of columns in a multiline text box, rows is the number of lines in a multiline text box, and the text is the default value for the setting

eg

<form action= "save.php" method= "POST" >
<textarea rows= "cols=" > enter the content here ...</textarea>
</form>

    • Radio box, check box

Syntax: <input type= "Radio/checkbox" value= "value" name= "name" checked= "Checked" >

Explanation: Radio: Radio box, checkbox: check box; value: Values submitted to background, name: name for the control, for background use, when checked set "checked", the default is selected

Note: The same group of radio buttons, name values to be consistent, so as to ensure that the radio

    • Drop-down list box (radio)

Grammar:

<select>

<option value= "Sport 1" > Sports 2</option>

<option value= "Reading 1" selected= "selected" > Reading 2</option>

</select>

Explanation: Motion 1 is the value submitted to the server, motion 2 is the value of the page display, selected= "selected" By default check this value

    • Drop-down list box (multiple selection)

Syntax: Set multiple= "Multiple" in the Select tab

<form>

<select multiple= "multiple" >
<option value= "reading" > Reading </option>
</select>
</form>

    • Submit Button/reset button

Syntax: <input type= "Submit" value= "Submission" >

Explanation: When the type value is set to submit, the button cannot be submitted, Valus is the text displayed on the button

Syntax: <input type= "reset" value= "reset" >

Explanation: The button has reset function when the type value is set to reset, Valus is the text displayed on the button

    • Label label on Form form

Explanation: When the user clicks the label label, the browser automatically shifts focus to the label-related form control (just above the form control associated with the label)

Syntax: <label for= "control ID Name" >

<form>
<label for= "Male" > Men </label>
<input type= "Radio" name= "Gender" id= "male"/>

</form>

Dragon Boat Festival small holiday--front-end Basics 02 interacting with the browser, form labels

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.