精选内容
精选内容

常见的表单元素有哪些

生活 2019-02-02 19:23:22 1340

本文收集整理关于常见的表单元素有哪些的相关议题，使用内容导航快速到达。

内容导航：

  • Q1:html表单元素有哪些？
  • Q2:网页实例中常见的表单元素有哪些
  • Q3:html5新增的表单元素有哪些
  • Q4:表单中常用的表单元素有哪些？说出它们所提供给的属性，方法，和集合

    • Q1：html表单元素有哪些？

    HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等。

    一、文本域

    二、密码域

    密码跟文本框类似，但是在里面输入的内容显示为圆点。

    三、单选按钮

    男人: Male

    女人： Female

    四、复选框

    五、按钮

    六、重置按钮

    当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。

    七、提交按钮

    当点击提交按钮时，浏览器将自动提交表单。

    八、隐藏域

    隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。

    九、上传域

    十、图片按钮

    十一、下拉列表男人



    十三、禁用（disabled）与只读（readonly）

    禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

    禁用文本框：

    只读文本框:

    十四、TextArea

    十五、fieldset 定义域
    fieldset用于给表单元素分组，legend用于设置分组标题。

    表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

    Q2：网页实例中常见的表单元素有哪些

    1、文本框
    2、文本域
    3、按钮
    4、复选框
    5、单选按钮
    6、列表菜单
    7、文件域
    8、图像域
    9、隐藏域
    这些就是比较常见的，其实一般的表单构造只用到1~6，而7~9用的也不多，我在这里只给出标记的中文名称和简单的标记语法，具体的属性、用法等内容比较多，请你在百度上看一下！

    Q3：html5新增的表单元素有哪些

    表单结构更灵活
    要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址
    <body>






    新增表单元素
    我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用
    email 类型用于验证email的格式，当提交表单时会自动验证email域的值
    url 类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值
    number 类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持
    range 类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100
    日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：
    date - 选取日、月、年
    month - 选取月、年
    week - 选取周和年
    time - 选取时间（小时和分钟）
    datetime - 选取时间、日、月、年（UTC 时间）
    datetime-local - 选取时间、日、月、年（本地时间）
    search 类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标
    tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持
    color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中
    案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果


    主页:


    邮箱:


    生日:


    时间:


    星期:


    年龄:


    薪水:


    电话:


    颜色:







    浏览器的支持情况
    chrome：
    firefox：
    Opera：
    Microsoft Edge：
    好，我们对微软的进步进行表扬！
    新增表单属性
    除了新增的表单元素之外，html5中还新增了一些表单属性
    新的 form 属性：
    autocomplete
    novalidate
    新的 input 属性：
    autocomplete
    autofocus
    form
    form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
    height 和 width
    list
    min, max 和 step
    multiple
    pattern (regexp)
    placeholder
    required
    在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了
    <body>












    选择文件




    区号：













    Q4：表单中常用的表单元素有哪些？说出它们所提供给的属性，方法，和集合

    表单的基本元素