表单

三 表单

作用：收集用户信息

1 由三部分组成: 

表单控件  input   [也称表单元素] 

提示信息  

表单域 from

checked属性 选中的意思  check的过去式

表示过去已经被选中的

 

 一 input标签

 1）常用属性

1 name  控件的名称

2 size  控件在页面中的宽度

3 value 默认文本值

4 type  类型

5 checked 默认被选中的

6 maxlength 允许输入的最多字符数 

2）类型

text     //1 单行文本框
password //2 密码输入框
radio    //3 单选框
CheckBox //4 复选框
button   //5 普通 按钮
submit   //6 提交 按钮
reset    //7 重置 按钮
image    //8 图像形式的提交按钮 必须包含src图像地址
file     //9 文件域
hidden   //10 隐藏

 3）单选框

<form action="index/add" method="post">
    <label for="nan">男</label><input type="radio" name="sex" value="男" id="nan"/>
    <label for="nv">女</label><input type="radio" name="sex" value="女" id="nv"/>
    <input type="submit" value="提交">
</form>

//1 单选框label的for和input的id绑定后 做不到点击名字选中按钮

//2 只有在文本框的时候才可以获取输入焦点

//3 单选框name值必须设置为一致 用value值来区分

4）复选框

<form action="index/add" method="post">
    <label for="lq">篮球</label><input type="checkbox" name="lq" value="篮球" id="lq"/>
    <label for="tq">台球</label><input type="checkbox" name="tq" value="台球" id="tq"/>
    <input type="submit" value="提交">
</form>

//1 复选框可以多选，不限制选中的数量；

//2 复选框要想被正确提交，必须设置 name 属性，而且每个复选框的 name 属性值和 value 属性值都建议不同；

//3 复选框建议与 <label> 标签配合使用；

//4 <label> 标签中的 for 属性指向复选框的 id 属性，类似绑定。

二 label标签

//1 label不属于表单 但是经常和表单搭配使用

//2 当用户点击label标签里面的文字是，光标会定位到指定的表单里

<label>用户名:<input type="text"/></label>// 用法1：label标签直接包含input标签

<label for="name">用户名:</label><input type="text" id="name"/> //用法2：label的for属性 与input的id属性绑定

 

三 文本域 textarea

<textarea rows="10" cols="20">
</textarea>
rows //1 显示的行数
cols //2 每行显示的字符数

四 select下拉列表

<select name="city">
    <option value="0">-----请选择城市-----</option>
    <option value="1">北京</option>
    <option value="2">天津</option>
    <option value="3">上海</option>
    <option value="4">重庆</option>
</select>

selected = selected //默认选中的

58同城切换城市的下拉框 是用div做的 而不是select

五  form表单域

<form action="url地址" method="提交方式" name="表单名称">

各种表单控件

</form>