表单就是收集用户信息的,就是让用户填写的、选择的。

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=”” 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="我是一个普通按钮" />

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之表单元素的更多相关文章

  1. (10)用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  2. 使用CSS来渲染HTML的表单元素

    效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> ...

  3. 自定义常用input表单元素三:纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  4. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  5. 关于谷歌浏览器 表单元素获取焦点后自动增加外边线的问题解决CSS代码

    input,textarea:focus { outline: none;} /*去除表单元素默认边框*/

  6. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  7. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  8. 【原】如何改变表单元素的外观(for Webkit and IE10)

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  9. jQuery使用之(四)处理页面的表单元素

    表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的val ...

随机推荐

  1. 【转】Android SDK Samples,学习Android的好方法

    转载地址:http://blog.csdn.net/rowland001/article/details/50886288 从今天开始呢,我要开始学习Google家自己出的Android代码示例,总觉 ...

  2. ArrayList、Vector、LinkedList的区别联系?

    1.ArrayList.Vector.LinkedList类都是java.util包中,均为可伸缩数组. 2.ArrayList和Vector底层都是数组实现的,所以,索引数据快,删除.插入数据慢. ...

  3. 最快让你上手ReactiveCocoa之基础篇

    前言 很多blog都说ReactiveCocoa好用,然后各种秀自己如何灵活运用ReactiveCocoa,但是感觉真正缺少的是一篇如何学习ReactiveCocoa的文章,这里介绍一下. 1.Rea ...

  4. couchDB视图

    视图是设计文档的一部分. 视图函数 map函数 Map方法的参数只有一个,就是当前的文档对象.Map方法的实现需要根据文档对象的内容,确定是否要输出结果. 如果需要输出的话,可以通过emit来完成. ...

  5. iOS系列 基础篇 08 文本与键盘

    iOS系列 基础篇 08 文本与键盘 目录: 1. 扯扯犊子 2. TextField 3. TextView 4. 键盘的打开和关闭 5. 打开/关闭键盘的通知 6. 键盘的种类 7. 最后再扯两句 ...

  6. JAVA编程思想(第四版)学习笔记----11.10 Map

    之前学习的是Collection层次的List接口.List层次比较简单,除去与多线程安全相关的CoppyOnWriteArrayList<T>类,这一个类在集中涉及多线程相关知识时候再学 ...

  7. 一道关于java序列化的问题,看大家知多少————

    问题先放在这里,稍后我会做出解答 已知类有Test和Test2,问两次主程序的输出结果是多少(SerializeUtil只是序列化的工具类) 类Test public class Test imple ...

  8. SQL Server封闭掉 触发器递归

    SQL Server关闭掉 触发器递归SQL Server  是有一个开关, 可以关闭掉 触发器递归的.EXEC sp_dboption '数据库名字', 'recursive triggers', ...

  9. 机器学习实战笔记(Python实现)-03-朴素贝叶斯

    --------------------------------------------------------------------------------------- 本系列文章为<机器 ...

  10. hdu5651 xiaoxin juju needs help (多重集的全排列+逆元)

    xiaoxin juju needs help 题意:给你一个字符串,求打乱字符后,有多少种回文串.                      (题于文末) 知识点: n个元素,其中a1,a2,··· ...