HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。

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

请输入你的姓名:

01.

02.

输入用户姓名

03.

04.

05.

06.

请输入你的姓名:

07.

08.

09.

10.

11.

12.

学习HTML表单(Form)最关键要掌握的有三个要点:

表单控件(Form Controls)

Action

Method

先说表单控件(Form Controls),通过HTML表单的各种控件,用户可以输入文字信息,或者从选项中选择,以及做提交的操作。比如上面的例句里,input type= "text"就是一个表单控件,表示一个单行输入框。

用户填入表单的信息总是需要程序来进行处理,表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.php100.com/html/asdocs/html_tutorials/yourname.php。

至于method,表示了发送表单信息的方式。method有两个值:get和post。get的方式是将表单控件的name/value信息经过编码之后,通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送,你在地址栏看不到表单的提交信息。那什么时候用get,什么时候用post呢?一般是这样来判断的,如果只是为取得和显示数据,用get;一旦涉及数据的保存和更新,那么建议用post。

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

HTML表单(Form)常用控件有:

表单控件(Form Contros)

说明

input type="text"

单行文本输入框

input type="submit"

将表单(Form)里的信息提交给表单里action所指向的文件

input type="checkbox"

复选框

input type="radio"

单选框

select

下拉框

textArea

多行文本输入框

input type="password"

密码输入框(输入的文字用*表示)

表单控件(Form Control):单行文本输入框(input type="text")

单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。例句如下:

01.

02.

输入用户姓名

03.

04.

06.

请输入你的姓名:

07.

08.

09.

10.

11.

12.

表单控件(Form Control):复选框(input type="checkbox")

复选框允许用户在一组选项里,选择多个。示例代码: 苹果桔子芒果

01.

02.

选择

03.

04.

请选择你喜欢的水果:

06.

苹果

07.

桔子

08.

芒果

09.

10.

11.

12.

用checked表示缺省已选的选项。 桔子

01.

02.

选择

03.

04.

请选择你喜欢的水果:

06.

苹果

07.

桔子

08.

芒果

09.

10.

11.

12.

表单控件(Form Control):单选框(input type="radio")

使用单选框,让用户在一组选项里只能选择一个。示例代码: 苹果桔子芒果

01.

02.

选择

03.

04.

请选择你最喜欢的水果:

06.

苹果

07.

桔子

08.

芒果

09.

10.

11.

12.

13.

用checked表示缺省已选的选项。 桔子

01.

02.

选择

03.

04.

请选择你最喜欢的水果:

06.

苹果

07.

桔子

08.

芒果

09.

10.

11.

12.

13.

表单控件(Form Control):下拉框(select)

下拉框(Select)既可以用做单选,也可以用做复选。单选例句如下:    苹果   桔子   芒果

01.

02.

04.

你最喜欢的水果是:

05.

06.

苹果

07.

桔子

08.

芒果

09.

10.

11.

12.

13.

如果要变成复选,加muiltiple即可。用户用Ctrl来实现多选。例句:

01.

02.

选择

03.

05.

你最喜欢的水果是:

06.

07.

苹果

08.

桔子

09.

芒果

10.

11.

12.

13.

14.

15.

用户还可以用size属性来改变下拉框(Select)的大小。

01.

02.

选择

03.

04.

06.

你最喜欢的水果是:

07.

08.

苹果

09.

桔子

10.

芒果

11.

12.

13.

14.

15.

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

多行输入框(textarea)主要用于输入较长的文本信息。例句如下:

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

01.

02.

请提宝贵意见

03.

04.

06.

请提宝贵意见:

07.

08.

09.

10.

11.

12.

13.

表单控件(Form Control):密码输入框(input type="password")

密码输入框(input type="password")主要用于一些保密信息的输入,比如密码。因为用户输入的时候,显示的不是输入的内容,而是黑点符号。。例句如下:

01.

02.

输入用户姓名和密码

03.

04.

06.

请输入你的姓名:

07.

08.

请输入你的密码:

09.

10.

11.

12.

13.

14.

15.

表单控件(Form Control):提交(input type="submit")

通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下:

01.

02.

输入用户姓名

03.

04.

06.

请输入你的姓名:

07.

08.

09.

10.

11.

12.

表单控件(Form Control):图片提交(input type="image")

input type=image 相当于 input type=submit,不同的是,input type=image 以一个图片作为表单的提交按钮,其中 src 属性表示图片的路径。

01.

02.

输入用户姓名

03.

04.

06.

请输入你的姓名:

07.

08.

09.

alt ="提交" NAME="imagesubmit">

10.

11.

12.

13.

html中用form单选框右侧提示汗字,HTML表单(Forms)解析相关推荐

  1. html手机单选框,手机移动网页制作:表单输入框、单选框、复选框

    手机移动网页制作:表单输入框.单选框.复选框 本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...

  2. html表格输入框怎么左移动,当我向CSS中的文本框添加边框时,HTML表单输入会移动...

    我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动 当用户输入不正确的凭据到表 ...

  3. html中的数字选框,带有复选框和数字类型的HTML表单提交与PHP?

    为了学习的目的,我在做这个网站,用户可以选择一些项目和他想要的单位数量,假设这是最简单的购物应用程序.带有复选框和数字类型的HTML表单提交与PHP? 于是,我从数据库中读取在目录中的现有项目: $q ...

  4. JS解决form表单刷新页面,提示“确认重新提交表单”

    问题 在html添加表单后,重新刷新出现确认重新提交表单的提示,一刷新就提示,很不友好 解决 在js中添加window.history.replaceState(null, null, window. ...

  5. form标签的action之前 加密_HTML从零开始——表单标签

    网页发展的过程中,总还是需要和用户互动的,尤其是需要个人信息.注册账号.处理事务等等的时候,用户要按照网站规定的格式来填写信息,这就需要表单了. 表单(form)是用户输入信息与网页互动的一种形式.大 ...

  6. html表单输入的文本框的值,网页设计关于表单输入框的技巧代码

    虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧. 1.使用, 2018-04-14 网页表格表框制作技巧. ---------------- ...

  7. elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题

    项目中有一个需求,填写表单,有两个相关联的下拉框,要根据部门筛选部门内的人员 当部门切换时,清空负责人里的内容 一开始的写法 v-for="(item,i) in getDepartment ...

  8. html5简介的文本框,HTML5实战与剖析之表单——文本框脚本

    文本框类型 在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签.这两种标签比较相似,但是他们也有区别. 如果一定要用input ...

  9. 处理ajax表单验证结果,使用 jQuery Form 插件完成带数据验证的 Ajax 表单

    表单提交之前,一般我们要在前端对表单的输入值做一些基本验证,以避免恶意提交,并提高安全性.我们可以通过两个 jQuery 插件实现这两个功能:Malsup's AjaxForm 和 Bassistan ...

最新文章

  1. 回顾2018,正在改变未来游戏规则的技术
  2. golang连接postgresql too many client_MySQL和PostgreSQL压测性能对比
  3. linux判断网卡是否挂载,检查网卡是否加载 - Linux服务器网卡驱动安装及故障排除_服务器应用_Linux公社-Linux系统门户网站...
  4. 【XSY2720】区间第k小 整体二分 可持久化线段树
  5. 要不要买保险,看这篇就够了
  6. php 变量代码,php中的可变变量(代码详解)
  7. 公司网络需要内网开发,教你如何使内外网同时访问(windows)
  8. 机器学习数学知识积累总结
  9. 文字绘制——pygame之旅
  10. HTML四季变换图,四季星空图
  11. HEVC函数入门(22)——变换量化
  12. 从身份证号获取身份证信息
  13. 一个双向转换火星文的玩具
  14. 计算机关机时出现蓝屏,关机蓝屏,教您电脑关机蓝屏怎么解决
  15. 精彩回顾 | Dev.Together 2022 开发者生态峰会圆满落幕
  16. numpy.random.seed()用法详解
  17. pico的学习之路(四)——HC-SR501人体感应模块(树莓派pico实现)
  18. office修复找不到msi_office2013安装出错,老是出现找不到officeMUI.msi或则officeMUI.xml等,是什么原 - Microsoft Community...
  19. 阿里云服务器 远程桌面连接 卡顿
  20. Amazon vs Google 云服务

热门文章

  1. java微信公众号短信验证码_解决微信端公众号网页获取短信验证码ajax重复调用两次的问题...
  2. 有道云笔记 markdown html,你不可不知的有道云笔记Markdown指南【进阶版】
  3. 使用ABAP批量下载有道云笔记中的图片
  4. 《上瘾:让用户养成使用习惯的四大产品逻辑》读书笔记摘录
  5. Python 计算两个连通子图距离_复杂网络分析之python利器NetworkX
  6. UITableView去掉Grouped样式的第一组Header组头
  7. flex布局中的自动占满剩下的内容
  8. 7-87 时间换算 (15 分)
  9. Linux 自签名ssl证书生成
  10. java版林地府邸种子_我的世界林地府邸地图种子代码分享