首页 > 代码库 > CSS之表单元素
CSS之表单元素
表单就是收集用户信息的，就是让用户填写的、选择的。
|
1 <div> 2 <h3>欢迎注册本网站</h3> 3 <form> 4 所有的表单内容，都要写在form标签里面 5 </form> 6 </div> |
form是英语表单的意思。form标签里面有action属性和method属性，action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
1 文本框
|
1 <input type="text" /> |
input表示“输入”，指的是这是一个“输入小部件”，
type表示“类型”，
text表示“文本”，指的是类型是一个文本框的输入小部件。
这是一个自封闭标签，自此，我们学习的自封闭标签有：
|
1 <meta name=”Keywords” content=”” /> 2 <img src=http://www.mamicode.com/”” alt=”” /> 3 <input type=”text” /> |
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：
|
1 <input type="text" value="默认有的值" /> |
2 密码框
|
1 <input type="password" /> |
也就是说，input标签很神奇，又是文本框，又是密码框。
到底是啥？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框
3 单选按钮
只能选一个，术语叫做“互斥”。
|
1 <input type="radio" name="xingbie" /> 男 2 <input type="radio" name="xingbie" /> 女 |
radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
|
1 <input type="radio" name="xingbie" /> 男 2 <input type="radio" name="xingbie" /> 女 |
默认被选择，就应该书写checked=”checked”
|
1 <input type="radio" name="sex" checked="checked"> |
4 复选框
也是input标签，type是checkbox。
|
1 <p> 2 请选择你的爱好： 3 <input type="checkbox" name="aihao"/> 睡觉 4 <input type="checkbox" name="aihao"/> 吃饭 5 <input type="checkbox" name="aihao"/> 足球 6 <input type="checkbox" name="aihao"/> 篮球 7 <input type="checkbox" name="aihao"/> 乒乓球 8 <input type="checkbox" name="aihao"/> 打豆豆 9 </p> |
复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）
总结:
|
1 <input type="text" /> 文本框 2 <input type="password" /> 密码框 1 <input type="radio"> 单选按钮 2 <input type="checkbox" /> 复选框 |
5 下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
|
1 <select> 2 <option>北京</option> 3 <option>河北</option> 4 <option>河南</option> 5 <option>山东</option> 6 <option>山西</option> 7 <option>湖北</option> 8 <option>安徽</option> 9 </select> |
6 多行文本框（文本域）
text就是“文本”，area就是“区域”。
|
1 <textarea cols="30" rows="10"></textarea> |
这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。
7 三种按钮
按钮也是input标签，一共有三种按钮：
普通按钮：
|
1 <input type="button" value="http://www.mamicode.com/我是一个普通按钮" /> |
button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。
提交按钮：
|
1 <input type="submit" /> |
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。（Node.js我们猴年要学，Node.js就是后台语言，到时候我们就知道怎么把表单存储到数据库中了。实际上Ajax课会给大家讲半天的PHP，涉及MySQL，Ajax课你就知道表单怎么真的被提交了。）
重置按钮：
|
1 <input type="reset" /> |
reset就是“复位”的意思。
至此，input的类型实际上非常多，HTML5将会变得更多。现在的阶段，input的类型：
|
1 text 2 password 3 radio 4 checkbox 5 button 6 submit 7 reset |
8 label标签
本质上讲，“男”、“女”这两个汉字，和input元素没有关系。
|
1 <input type="radio" name="sex" /> 男 2 <input type="radio" name="sex" /> 女 |
label就是解决这个问题的。
|
1 <input type="radio" name="sex" id="nan" /> <label for="nan">男</label> 2 <input type="radio" name="sex" id="nv" /> <label for="nv">女</label> |
input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。
复选框也有label：
|
1 <input type="checkbox" id="kk" /> 2 <label for="kk">10天内免登陆</label> |
什么表单元素都有label。
CSS之表单元素