前端HTML & CSS 基础入门（7）表单

前面

前面我们已经熟悉了网页上一些常见的元素，如在网页上显示一段文字、一张图片、一个列表、一张表格等等。这些东西都是事先编辑好显示在页面上只提供给用户看的，实际上，我们可以把这样的页面称之为静态页面。有“静”就有”动”，自然也就有了动态页面，所谓动态页面就是在页面上能提供与用户产生交互的元素，比如：我们想注册成为某个网站的会员，就要填写注册信息提交给网站后台；我们在网上发表评论；我们在网上填写一些调查问卷等等。

image

上图的163邮箱注册页面就是一个表单，在表单中有文本框、下拉列表、按钮等元素，我们可以通过这些元素完成数据的输入。那么，输入的数据该如何收集呢？这个就不是HTML所讨论的问题了，属于后台开发，如果您感兴趣，我们得另开一栏。这里我们先了解一下表单上的常见元素。

表单元素

标签：用于创建一个表单，表单里面可以包含文本框、按钮、下拉列表等元素。

元素（输入元素）：是表单里面最常用的元素，它有多种不同的类型（比如：单行文本框、密码框、单选按钮、复选框等等），可以通过【type】属性来设置。下表列出了常见的类型及说明。

image

示例代码：





    


     账号：
        
 密码：
        

         性别：男 女 

         爱好：游泳 篮球 跑步 
 简历：

注意：单选按钮【radio】和复选框【checkbox】里的【name】属性必须为同一值，表明这些选项归属于同一组。

image

标签用于定义了一个下拉列表；

示例代码：

请选择您的专业：

image

元素（多行文本）</strong>：****我们可以利用<textarea>元素创建一个文本块输入控件，用于输入多行文本，可输入的字数不受限制。可以通过【rows】和【cols】属性来规定 textarea 的行数和列数（尺寸大小），也可以使用 CSS 的 height 和 width 属性。</p> <p>示例代码：</p> <pre><code><!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #textarea2 {/*设置ID为textarea2的多行文本框的宽、高尺寸*/ width:200px; height:80px; } </style> </head> <body> <form> 个人简介：<br /> <textarea rows="5" cols="30">请介绍一下你自己
学习心得：
学习心得（不少于400字）

image

小结一下

小结一下：表单元素的标签我们初步记住三个即可：

1、输入元素：这个里面包括了很多不同类型的标签，比如：单行文本框、密码框、按钮、单选按钮、多选框等等，它们用【type】属性加以区分。

2、下拉列表< select >：就是个下拉列表框，没有其它类别。由两部分组成：定义标签< select >和选项标签< option >，

3、多行文本< textarea >：就是多行文本框，也没有其它类别。

其实如果我们学习后台开发，比如利用微软的VS平台，在它的工具箱里有所有的标签控件，我们可以直接拉到编辑窗口直接使用。

自己整理了一份最全前端学习资料,从最基础的HTML+CSS+JS [炫酷特效，游戏，插件封装，设计模式]到移动端HTML5的项目实战的学习资料都有，送给每一位前端小伙伴。企鹅裙：685910553（前端资料分享）。有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

前端HTML & CSS 基础入门（7）表单

前面

表单元素

小结一下

你可能感兴趣的:(前端HTML & CSS 基础入门（7）表单)