1 HTML 表单和输入

1.1 HTML 表单介绍

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

例子:表单内的 文本输入框

<form>
.
<input  type="text">
.
</form>

1.2 表单input控件输入类型

多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

 1.2.1 text 文本输入类型:

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

 1.2.2 password 密码输入类型

文本域通过<input type="password "> 标签来设定,当用户要在表单中"键入非显示密码"等内容时,就会用到文本域。

1.2.3 checkboxes 多选框类型

文本域通过<input type="checkboxs"> 标签来设定,当用户要在表单中"键入多项选择"等内容时,就会用到文本域。

1.2.4 radio 单选框

文本域通过<input type="checkboxs"> 标签来设定,当用户要在表单中"键入单选内容时"等内容时,就会用到文本域。

1.2.5 submit提交按钮

文本域通过<input type="submit"> 标签来设定,当用户要在表单中"提交其他input值时"等内容时,就会用到文本域。

 1.2.6 select选择按钮

文本域通过<input type="select来设定,当用户要在表单中"进行多项选择",等内容时,就会用到文本域。

1.2.7 file文件提交按钮

文本域通过<input type="file来设定,当用户要在表单中"进行上传文件",等内容时,就会用到文本域。

css总结18:HTML 表单和inut各个常用标签的更多相关文章

  1. 范仁义html+css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  2. [oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)

    1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...

  3. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  4. 才趟过的一个坑,css造成的Validform表单提交按钮点击无效

    最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...

  5. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

  6. 6款漂亮HTML CSS样式用户留言表单

    如今我们的网站.页面更加需要注重细节,不论是字体的样式.还是图片的分辨率清晰度都会影响到用户的访问体验和PV,以及用户以后是否会回访我们的网站/博客.如果有时间的时候,老左也会浏览和阅读相关的前端网站 ...

  7. HTML5+CSS:02用户注册表单

            新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...

  8. [19/06/08-星期六] CSS基础_表格&表单

    一.表格 如生活中的Excel表格,用途就是同来表示一些格式化的数据,如课程表.工资条.成绩单. 在网页中也可以创建出不同的表格,在HTML中使用table标签来创建一个表格.table是个块元素. ...

  9. Validate表单验证插件之常用参数介绍

    Validate常用的一些参数和方法 1.errorElement 修改显示错误提示信息的HTML标签.默认是<label>,可以指定为<span>.... $("# ...

随机推荐

  1. 一个靠谱的maven仓库镜像地址

    <mirror>   <id>sprintio</id>  <mirrorOf>central</mirrorOf>  <name&g ...

  2. hdu 4609 3-idiots——FFT

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4609 答案就是随便选三条边的方案 - 不合法的方案. 不合法的方案就是算出 x+y = k 的方案数 g[ ...

  3. 让Delphi XE5跟其他版本的Delphi共存

    找到Delphi XE5的安装根目录  ....  \Program Files (x86)\Embarcadero\RAD Studio\12.0\bin下的cglm.ini文件, 打开cglm.i ...

  4. java实现一个最简单的tomcat服务

    在了解tomcat的基本原理之前,首先要了解tomcatt最基本的运行原理. 1.如何启动? main方法是程序的入口,tomcat也不例外,查看tomcat源码,发现main是在Bootstrap  ...

  5. PHP中的use、命名空间的理解

    看.Net中的命名空间和using using Ddd.Core; using Ddd.Core.Caching; using Ddd.Core.Data; using Ddd.Core.Domain ...

  6. 解决在“Resources”参数中指定了项“obj\Debug\KaiShiHID.Form1.resources”多次。“Resources”参数不支持重复项

    错误截图: 发生原因描述: 窗体Form1, 有一个分部类; 叫做FormPartial.cs; 双击了FormPartial这个窗体, 然后生成了一个Load事件, 即时就报了编译错误, 然后就删除 ...

  7. git学习3 - 克隆远程库到本地 将本地库上传到git

    如何克隆远程版本库到本地 git clone URL 如何用命令将本地项目上传到git 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 (注意: cd C:/U ...

  8. 解决git gnutls_handshake失败

    sudo apt-get install build-essential fakeroot dpkg-dev mkdir ~/git-openssl cd ~/git-openssl sudo apt ...

  9. 8.solr学习速成之FacetPivot

    什么是Facet.pivot  Facet.pivot就是按照多个维度进行分组查询,是Facet的加强,在实际运用中经常用到,一个典型的例子就是商品目录树 NamedList解释: NamedList ...

  10. pandas分组和聚合

    Pandas分组与聚合 分组 (groupby) 对数据集进行分组,然后对每组进行统计分析 SQL能够对数据进行过滤,分组聚合 pandas能利用groupby进行更加复杂的分组运算 分组运算过程:s ...