我的编程空间,编程开发者的网络收藏夹
学习永远不晚

关于HTML表单的详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

关于HTML表单的详解

  我们都知道,无论生活上还是工作上,在很多时候我们都需要用到表单的哦。html表单是HTML的一个重要部分,它的作用主要是采集以及提交用户输入的信息。今天,小编就给大家介绍一下html的表单。对html感兴趣的大家可以了解一下。

  如例,一个让用户输入姓名的HTML表单(Form)。代码如下:

HTML表单介绍_html基础_html教程_编程学习网

html表单示例

(html表单示例)

  (一)HTML表单中关键的三个要点:

  (1)表单控件(FormControls):通过HTML表单的控件,用户可以输入文字信息或者是从选项中选择以及做提交的操作。如上例,inputtype="text"就属于一个表单控件,指的是单行输入框。

  (2)Action:用户填入表单的信息需要程序进行处理,表单中action指明了处理表单信息的文件。如上例:http://www.duote.com/html/asdocs/html_tutorials/yourname.asp。

  (3)Method:这表示了发送表单信息的方式。method中有两个值:get以及post。其中,get的方式是把表单控件的name/value信息经过编码后,通过URL发送。然而,post就把表单的内容通过http发送,在地址栏是看不到表单的提交信息。那么,要是只为取得和显示数据,用get;要是涉及数据的保存和更新,那就建议用post。

  (二)HTML表单常用控件(Controls)

HTML表单常用控件

  (1)表单控件:单行文本输入框(inputtype="text")

  单行文本输入框能让用户输入简短的单行信息,比如说用户姓名。如下:

单行文本输入框

  (2)表单控件:复选框(inputtype="checkbox")

  复选框能让用户在一组选项里选择多个。如下:

复选框

  checked表示缺省已选的选项。

缺省已选的选项v

  (3)表单控件:单选框(inputtype="radio")

  使用单选框,使用户在一组选项里面只能选一个。如下:

单选框(

  checked表示缺省已选的选项。

缺省已选的选项

  (4)表单控件:下拉框(select)

  下拉框可以用做单选,也可以用做复选。

  单选例子如下:

单选

  复选加muiltiple就可以了,可以用Ctrl来实现多选。如下:

复选

  我们还能用size属性改变下拉框)的大小。

  (5)表单控件:多行输入框(textarea)

  多行输入框主要用来输入比较长的文本信息。如下:

多行输入框

  其中,cols指的是textarea的宽度,rows则表示textarea的高度。

  (6)表单控件:密码输入框(inputtype="password")

  密码输入框是用于一些保密信息的输入,例如密码。由于用户输入时,显示的非用户输入的内容,而是黑点符号。如下:

密码输入框

  (7)表单控件:提交(inputtype="submit")

  提交可以把表单里的信息提交给action指向的文件。如下:

提交

  (8)表单控件:图片提交(inputtype="image")

  inputtype=image等于是inputtype=submit,而inputtype=image是以图片作为表单的提交按钮,而class="lazy" data-src属性表示图片的路径。

图片提交

  总结:以上就是关于html的表单介绍。其实,无论生活上还是工作上,在很多时候我们都需要用到表单的哦。希望通过解读这篇文章后,相信大家会对html基础知识有更多的了解,想要了解更多的话,可以关注我们的网站:编程学习网教育。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

关于HTML表单的详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

关于HTML表单的详解

编程学习网:HTML表单是HTML的一个重要部分,它的作用主要是采集以及提交用户输入的信息。今天,小编就给大家介绍一下html的表单。对html感兴趣的大家可以了解一下。
关于HTML表单的详解

关于HTML字符集的详细内容

编程学习网:我们都知道,在浏览器需要知道使用哪一种字符集才可以正确地显示HTML的页面。万维网在早期使用的字符集是ASCII,而ASCII支持0到9的数字,大写以及小写的英文字母表,还有一些特殊的字符。但是,因为很多国家使用的字符并不属于ASCII,而我们现代浏览器的默认字符集是ISO-8859-1。要是网页运用不同于ISO-8859-1的字符集,那就需要在标签上进行指定了。
关于HTML字符集的详细内容

表单中Readonly和Disabled的区别详解

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单
表单中Readonly和Disabled的区别详解
2024-04-02

html form表单基础入门案例讲解

-2,语法td{ text-align : center; } 选择器{ 属性名 : 属性值 ; }-3,入门案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>测试 css修饰网页&l
html form表单基础入门案例讲解
2024-04-02

新的HTML标签<search>详解

另一个需要注意的关键点是,搜索区域不一定是网站或在线平台上带有搜索按钮的文本输入框。我们可以使用 <search>来过滤结果或表格行。它的实用性不仅限于文本输入和搜索框:<search>  <h2>Filter results</h2>  <form>
新的HTML标签<search>详解
2024-04-02

关于HTML的语义化标签和无语义化标签

什么是HTML语义化标签语义化的标签,旨在让标签有自己的含义,让浏览器认识这个标签所传达的信息,是干什么的有什么作用。 比如:h1标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。常用的语义化标签header元素是HTML
关于HTML的语义化标签和无语义化标签
2024-04-02

详解CSS伪元素的妙用单标签之美

目录:before和::before的区别哪些标签不支持伪元素?利用 after 清除浮动伪元素与css sprites 雪碧图单个颜色实现按钮 hover 、a
详解CSS伪元素的妙用单标签之美

web前端:html/css弹性布局的几大常用属性详解

编程学习网:在css1中,样式通常是基于在html源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。
web前端:html/css弹性布局的几大常用属性详解

javascript当表单中RESET的属性被激发时触发此事件使用什么函数,详细讲解

当表单中的重置按钮被点击时,可以使用JavaScript的reset事件侦听器触发重置事件。此事件侦听器通过form.addEventListener("reset",myFunction)函数调用,其中myFunction是在事件触发时执行的函数。重置事件侦听器中的函数可以访问event参数,获取有关事件的信息。防止默认表单提交行为需要调用event.preventDefault()方法。在重置事件中,可以执行各种操作,如清空表单、重新加载页面或发送服务器请求。
javascript当表单中RESET的属性被激发时触发此事件使用什么函数,详细讲解

推荐一个好看Table表格的css样式代码详解

漂亮的table表格样式css源码漂亮的table表格样式源码<head> <title></title> <style type="text/css"> table {
推荐一个好看Table表格的css样式代码详解
2024-04-02

javascript一个表单被递交时触发此事件使用什么函数,详细讲解

JavaScript表单提交事件函数表单提交时,JavaScript中可触发两种事件:onsubmit和submit。onsubmit:在用户提交表单后立即触发。可验证数据或显示加载指示器。submit:在表单提交到服务器后触发。可处理服务器响应或隐藏加载指示器。根据需求选择合适事件。一般,验证数据用onsubmit,处理服务器响应用submit。
javascript一个表单被递交时触发此事件使用什么函数,详细讲解

web前端:关于javascript的事件执行机制理解

编程学习网:Javascript最初受java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。
web前端:关于javascript的事件执行机制理解

Web前端:关于前端开发,你真的了解吗?

编程学习网:前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML,CSS及Javascript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
Web前端:关于前端开发,你真的了解吗?

javascript当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件使用什么函数,详细讲解

当用户在页面上触发上下文菜单(右键单击或快捷键)时,JavaScript中使用contextmenu函数处理事件。该函数提供有关菜单详细信息的访问,可以自定义处理菜单事件,包括阻止默认菜单行为。对于键盘快捷键触发,可以使用keydown事件处理程序和keyCode属性进行处理。contextmenu函数允许对上下文菜单行为进行自定义,增强交互,但需要注意不同浏览器默认行为和可用性问题。
javascript当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件使用什么函数,详细讲解

编程热搜

  • HTML常用标签超详细整理
    目录HTML概述1.1 什么是HTML1.2 HTML概念HTML常用基础标签标签的分类:常用基本标签HTML概述1.1 什么是HTMLHTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动
    HTML常用标签超详细整理
  • 一文看懂服务器操作
    web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的。
    一文看懂服务器操作
  • web前端:如何正确学习web前端流程以及如何找工作
    编程学习网:HTML、CSS、Javascript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。
    web前端:如何正确学习web前端流程以及如何找工作
  • 完美实现浮动元素横排居中显示
    经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的。注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成。一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看。首先看html
    完美实现浮动元素横排居中显示
  • 共同探讨CSS+DIV布局对建站的影响
    编程学习网:DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。现在就跟着小编共同来学习一下:共同探讨CSS+DIV布局对建站的影响。
    共同探讨CSS+DIV布局对建站的影响
  • 详解CSS伪元素的妙用单标签之美
    目录:before和::before的区别哪些标签不支持伪元素?利用 after 清除浮动伪元素与css sprites 雪碧图单个颜色实现按钮 hover 、a
    详解CSS伪元素的妙用单标签之美
  • web前端:实现单选框点击label标记中的文字也能选中
    编程学习网:label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在label元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
    web前端:实现单选框点击label标记中的文字也能选中
  • 为你介绍CSS浮动清除最好的方法
    编程学习网:所谓网站(Website),就是指在网际网路(因特网)上,根据一定的规则,使用HTML等工具制作的用於展示特定内容的相关网页的集合。现在就跟着小编共同来学习一下:为你介绍CSS浮动清除最好的方法。
    为你介绍CSS浮动清除最好的方法
  • 如何提升网页的加载速度?
    编程学习网:相信在使用浏览器去浏览网页的时候,有些时候总会是出现网页加载慢的情况,除了网速的问题的话,更多的时候还是需要进行相关的设置来去提升网页的加载速度,会发现快的速度将会是让人感觉到非常的爽,下面我们来分享一下该如何才能进行优化,最终提升效率。方法是有很多种,在这里就不逐个的来列举出来了,有需要的朋友们可以参考一下。
    如何提升网页的加载速度?
  • web前端:js垃圾回收及内存泄漏
    编程学习网:Javascript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。
    web前端:js垃圾回收及内存泄漏

目录