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

• 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