web_0206_2

1、label标签

目标：label主要的目的是提高用户体验。

概念：label标签为input元素定义标注（标签）

作用：用于绑定一个表单元素，当点击Label的时候，被绑定的表单元素就会获得输入焦点。

1. 直接用label包含input标签

<label>用户名：<input type="text" value="请输入用户名" name="username"></label>

     2.利用for和 id进行链接

<label for="psd">密码:</label> <input type="password" id="psd"></label>

总结：当我们点击文字的时候，我们的光标就能定位到输入框上，从而提高用户体验。

2、文本域textarea

文本域通常用于用户评价，或者是读者评价，贴吧中的回帖等

<p>留言：</p>
		<textarea cols="" rows=""></textarea>

notes：其中cols和rows是用于定义文本域的列数和行数的。但是通常在开发中我们往往直接用css中的width和height来进行定义。

文本框和文本域的区别

文本框<input type="text" /> 主要用于用户输入，密码输入，多为一行的文本

文本域<textarea></textarea>主要用于留言板，多行的文本。

 

3、select下拉列表

目的是为了让页面更省空间，从而实现下拉列表。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
            .....
</select>

通常来说<select></select>用得比较少，因为比较丑，许多网站都是用<div></div>+<li></li>来仿造的。

4、表单域form

表单域的作用

• 收集用户信息怎么传递给服务器。
• 目的，手机表单中的信息传递给服务器。

语法：

<form action="URL地址" method="提交方法" name="表单名称">
		</form>

例子：

<form action="" method="post" name="form1">
			用户名：<br />
			<input type="text" value="请输入用户名" name="username" /><br />
			密码：<br />
			<input type="password" name="psd" /><br />
			<input type="submit" />
			<input type="reset" />
		</form>

例子中因为有了表单域，所以submit属性的提交可以提交。reset属性可以重置表单域中的信息。

另外就是，action属性是提交数据的接收服务器的url地址，method中主要是post和get方法，而name就是一个备注提交的form的名字，后台接收方便区分。

 

关于表单的一些约定！

1. 元素属性值使用双引号语法。
2. 元素属性值能写上都写上，不要用默认值！