开发者社区> mr_伍先生> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS之表单元素

简介: 表单就是收集用户信息的,就是让用户填写的、选择的。 1                2                         欢迎注册本网站 3                         4                                 所有的表单内容,都要写在form标签里面 5                         6                form是英语表单的意思。
+关注继续查看

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

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实现表单
效果图如下: HTML代码如下: 06-表单1 form{ width: 500px; height: 800px; border:1px solid r...
860 0
前端学习笔记(8)css选择器(二)
选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
742 0
前端学习笔记(7)css选择器(一)
选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个元素。 复杂选择器:由“(空格)“ “ >” “ ~” “ +” “ ||” 等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
829 0
css4—第4代选择器
<p><img src="http://www.script-tutorials.com/demos/370/thumb.png" alt=""></p> <p><br></p> <p>        历史前进的步伐是不会停止的,紧跟着CSS3,新的CSS4也即将问世,它正由W3C编辑团队研发中。从历史的角度看,CSS的发展和web浏览器的发展是相互独立的,它们是并行进步的。这就导致不
1532 0
js时间戳转换日期格式和日期计算
一、时间戳转换日期 1 function formatDate(datetime) { 2 // 获取年月日时分秒值 slice(-2)过滤掉大于10日期前面的0 3 var year = datetime.
1628 0
+关注
mr_伍先生
java,编程语言,算法兴趣
476
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载