[Lesson 8] Web front-end development, HTML tag basis of (Ⅳ)

---

Forms and form elements labels

• Form: is a zone, the user information acquisition
• Form elements: text boxes, buttons, radio, check, drop-down lists, text fields

---

First, the form form

<form>Tag creates an HTML form for the user. Form elements contained within the form

• Form action: the form data to the server for transmission.

<form> Label usage is as follows:

	<form action="URL">
		表单元素
	</form>

actionElement to form a label, the element value of URL for specifying form data when the form is submitted to where
<form>other more attributes: Portals

---

Second, input select textarea form elements labels, etc.

1. the text box and password box

I.e., <input>label type attribute is text or password

	<form>
		<input type="text" name="text"/>	<!--当前为文本框-->
		<input type="passowrd name="psd" />	<!--当前为密码框-->
	</form>

Each form will usually with a name attribute, the name attribute is the name of the form data

• The role of the name attribute: When submitting the form data element-to-back, this time in dealing with the back-end data, you need to know which form elements of this data comes from. That's his role
• A simple summary, is what form elements to the backend data to be processed from

2. Submit button, reset button

I.e., <input>label type attribute sublime or reset

	<form>
		<input type="sublime" value="提交按钮"/>
		<input type="reset" value="重置按钮" />
	</form>

value attribute: value of the input element.

• In the button that is in <input>the text label displayed

3. The radio buttons, check boxes

Radio buttons: As the name suggests can choose only one option, namely the check box to select multiple options

	<form>
		<input type="radio 或 checkbox" 
			value="值" name="名称" checked="checked">
	</form>

checked property: When set checked="checked"when this option is selected by default

	性别：
	<input type="radio" value="boy" name="gender" checked="checkbox"/>男
	<input type="radio" value="girl" name="gender"/>女
	<br />
	爱好：
	<input type="checkbox" value="1" name="music">音乐
	<input type="checkbox" value="2" name="sport">体育
	<input type="checkbox" value="3" name="code" checked="checkbox">写代码

• For single box, we should note that the name value of the property to be consistent! ! !
• For box, name the value of the property can not

4. drop-down list box

	<select>
		<option>选项1</option>
		<option selected="selected">选项2</option>
	</select>

selected property: When set selected="selected"when the option is selected by default, and the role of the above-described checked same properties.

The text field

	<textarea rows="行数" cols="列数">文本</textarea>

• In the <textarea>written text within the label will default to appear in the editing area, as suggestive text

---

Code running on the page: Portal you own a small partner may feel, as follows

(Added: effect of form elements does not wrap, in order to show a more beautiful, so I added the <br />tag line feed)

<form>
		账号：<input type="text" name="userName"/>
		<br />
		密码：<input type="password" name="userPsd"/>
		<br />
		性别：
		<input type="radio" value="boy" name="gender" checked="checkbox"/>男
		<input type="radio" value="girl" name="gender"/>女
		<br />
		爱好：
		<input type="checkbox" value="1" name="music">音乐
		<input type="checkbox" value="2" name="sport">体育
		<input type="checkbox" value="3" name="code" checked="checkbox">写代码
		<br />
		年级：
		<select>
			<option>大一</option>
			<option>大二</option>
			<option>大三</option>
			<option>大四</option>
			<option selected="selceted">请选择</option>
		</select>
		<br />
		个人简介：
		<br />
		<textarea cols="50" rows="10">
			在这里输入内容...
		</textarea>
		<br />
		<input type="submit" value="点击确认" />
		<input type="reset" value="点击重置" />
</form>