第5天-表单

form标签

form标签表示表单，作用是用来收集用户的信息并发送给后台使用，例如：登录、注册

form表单属性：

　　action:  用于设置表单提交的地址，也就是说表单收集的数据要发送到哪去

　　method: 用于设置表单提交的方法

　　　　get :表单发送的数据会显示在浏览器地址栏

　　　　post：表单发送的数据通常不被用户看见

<form action="http://www.baidu.com/s" method="get">
    用户名：<input type="text" name="user" />
    密码： <input type="password" name="passwd"  />
    <input type="submit" value="提交" />
</form>

input标签

input标签为表单的某一个子项，会根据type属性的不同而功能不同，常用的几种type属性

type="text"
type="password"
type="checkbox"
type="radio"
type="button"
type="submit"
type="file"
type="hidden"

<!--通常用来输入文本内容-->
<input type="text" />

<!--通常用来输入密码，输入内容不可见-->
<input type="password" />

<!--用于表示多个选项，是否选择用check属性-->
爱好：
看书<input type="checkbox" value="book" name="aihao"> 
旅游<input type="checkbox" value="tour" name="aihao">
跑步<input type="checkbox" value="run" name="aihao">

<!--表示单选，几个input中只能选择一个，是否选中用checked属性-->
男：<input type="radio" value="man" name="gender"> 
女：<input type="radio" value="woman" name="gender">

<!--隐藏表单元素，有些时候后台需要某个数据，但是在前端不需要显示的时候用-->
<input type="hidden" />

<!--文件上传-->
<input type="file" />

<!--普通按钮，不触发提交动作，通常与js结合使用-->
<input type="button" />

<!--执行提交动作，将数据发送到后台-->
<input type="submit" />

其他属性

name属性： 规定input元素的名称，后天需要根据name来接收value

value属性： 表单项的值

readonly属性： 指定控件处于只读状态，针对输入框有效，按钮无效

disabled属性： 控件不可用，灰色，并且表单提交时不会传送此数据

注意：如果元素没有name属性，表单提交的时候，数据不会被发送出去

textarea元素

textarea表示多行文本框

rows属性：设置多行文本框的显示行数（高度）

cols属性：设置多行文本框显示列数（宽度），即字符数，具体尺寸取决于文字大小

<textarea rows="8" cols="80"></textarea>

button元素

定义一个按钮

<button>Click Me!</button>

select元素

定义下拉列表框

注意：如果value属性没有写，默认提交的时候，下拉框的值是被选中option元素里面的内容

<select name="city">
    <option value="bj">北京</option>
    <option value='sh'>上海</option>
    <option value='gz'>广州</option>
    <option value="sz">深圳</option>
</select>

label元素

为input元素定义标注（标记）

label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。比如

 

当我们没有使用label的时候，只有把鼠标点击了单选框的时候，才会被选中，点击文字是不会被选中的。

如果要实现点击文字也会被选中，就可以使用label, 它有两种使用方法

显式

<!--label里面的for需要和input里面的id对应上-->
<label for="man">男：</label><input id='man' type="radio" value="man" name="gender"> 
<label for="woman">女：</label><input id="woman" type="radio" value="woman" name="gender">

隐式

<label>男：<input type="radio" value="man" name="gender"> </label>
<label>女：<input type="radio" value="woman" name="gender"></label>