前端学习笔记2：使用表单标签，与用户交互

1.  表单标签

表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

• 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>
• action：浏览者输入的数据被传送到的地方，比如一个PHP页面
• method：数据传送方式（post/get）

<form method="post" action="save.php">...</form>

2. 文本输入框、密码输入框

• type：当type为“text”时为文本输入框，当为“password”时为密码输入框
• name：为文本输入框命名，以备后台程序使用
• value：为文本输入框设置默认值（一般起到提示作用）

<form method="post" action="save.php">姓名：<input type="text" name="myName"/><br />密码：<input type="password" name="pass"/></form>

3. 文本输入域

• <textarea></textarea>：文本域标签，支持多行文本输入，标签之间可以输入默认值
• rows：行数
• cols：列数

<form method="post" action="save.php"><textarea rows="5" cols="10">默认值</textarea></form>

4. 单选框、复选框

• type：为"radio"时是单选框，为"checkbox"时是复选框
• value：提交数据到服务器的值
• name：为控件命名，以便后台程序使用，同一组的单选按钮name必须一样
• checked：设置为"checked"时该选项默认被选中

<form name="iForm" method="post" action="save.php">你是否喜欢旅游？<br /><input type="radio" name="radioLove" value="喜欢" checked="checked"/>喜欢<input type="radio" name="radioLove" value="不喜欢" checked="checked"/>不喜欢<input type="radio" name="radioLove" value="无所谓" checked="checked"/>无所谓</form>

5. 下拉列表框

• value：向服务器提交的值
• <option>显示的值</option>
• multiple：多选

<form method="post" action="save.php"><label>爱好：</label><select multiple="multiple"><option value="看书" selected="selected">看书</option><option value="旅游">旅游</option><option value="运动">运动</option></select></form>

6. 提交按钮

• type：为submit时才有提交作用
• value：按钮上显示的文字
• name：供后台程序使用

<form method="post" action="save.php"><input type="submit" name="subBut" value="提交"/></form>

7. 重置按钮

• type：为reset才有重置作用

<form method="post" action="save.php"><input type="reset" name="resetBut" value="重置"/></form>

8. 表单中的label标签

• label标签不会向用户呈现任何特殊效果
• 当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
• for属性中的值应该与相关控件的id属性值一致

<form method="post" action="save.php"><label for="male">男</label><input type="radio" name="gender" id="male" /></form>