表单

三 表单

作用:收集用户信息

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>

 

 

 

 

 

 


 

posted @ 2021-01-18 17:48  棉花糖88  阅读(305)  评论(0编辑  收藏  举报