html中用form单选框右侧提示汗字,HTML表单(Forms)解析
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)解析相关推荐
- html手机单选框,手机移动网页制作:表单输入框、单选框、复选框
手机移动网页制作:表单输入框.单选框.复选框 本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...
- html表格输入框怎么左移动,当我向CSS中的文本框添加边框时,HTML表单输入会移动...
我想在登录表单上的输入字段中添加边框,但是当我添加边框时:1px纯黑色;到#登录表单输入,然后所有的文本框移出位置.当我向CSS中的文本框添加边框时,HTML表单输入会移动 当用户输入不正确的凭据到表 ...
- html中的数字选框,带有复选框和数字类型的HTML表单提交与PHP?
为了学习的目的,我在做这个网站,用户可以选择一些项目和他想要的单位数量,假设这是最简单的购物应用程序.带有复选框和数字类型的HTML表单提交与PHP? 于是,我从数据库中读取在目录中的现有项目: $q ...
- JS解决form表单刷新页面,提示“确认重新提交表单”
问题 在html添加表单后,重新刷新出现确认重新提交表单的提示,一刷新就提示,很不友好 解决 在js中添加window.history.replaceState(null, null, window. ...
- form标签的action之前 加密_HTML从零开始——表单标签
网页发展的过程中,总还是需要和用户互动的,尤其是需要个人信息.注册账号.处理事务等等的时候,用户要按照网站规定的格式来填写信息,这就需要表单了. 表单(form)是用户输入信息与网页互动的一种形式.大 ...
- html表单输入的文本框的值,网页设计关于表单输入框的技巧代码
虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧. 1.使用, 2018-04-14 网页表格表框制作技巧. ---------------- ...
- elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题
项目中有一个需求,填写表单,有两个相关联的下拉框,要根据部门筛选部门内的人员 当部门切换时,清空负责人里的内容 一开始的写法 v-for="(item,i) in getDepartment ...
- html5简介的文本框,HTML5实战与剖析之表单——文本框脚本
文本框类型 在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签.这两种标签比较相似,但是他们也有区别. 如果一定要用input ...
- 处理ajax表单验证结果,使用 jQuery Form 插件完成带数据验证的 Ajax 表单
表单提交之前,一般我们要在前端对表单的输入值做一些基本验证,以避免恶意提交,并提高安全性.我们可以通过两个 jQuery 插件实现这两个功能:Malsup's AjaxForm 和 Bassistan ...
最新文章
- 回顾2018,正在改变未来游戏规则的技术
- golang连接postgresql too many client_MySQL和PostgreSQL压测性能对比
- linux判断网卡是否挂载,检查网卡是否加载 - Linux服务器网卡驱动安装及故障排除_服务器应用_Linux公社-Linux系统门户网站...
- 【XSY2720】区间第k小 整体二分 可持久化线段树
- 要不要买保险,看这篇就够了
- php 变量代码,php中的可变变量(代码详解)
- 公司网络需要内网开发,教你如何使内外网同时访问(windows)
- 机器学习数学知识积累总结
- 文字绘制——pygame之旅
- HTML四季变换图,四季星空图
- HEVC函数入门(22)——变换量化
- 从身份证号获取身份证信息
- 一个双向转换火星文的玩具
- 计算机关机时出现蓝屏,关机蓝屏,教您电脑关机蓝屏怎么解决
- 精彩回顾 | Dev.Together 2022 开发者生态峰会圆满落幕
- numpy.random.seed()用法详解
- pico的学习之路(四)——HC-SR501人体感应模块(树莓派pico实现)
- office修复找不到msi_office2013安装出错,老是出现找不到officeMUI.msi或则officeMUI.xml等,是什么原 - Microsoft Community...
- 阿里云服务器 远程桌面连接 卡顿
- Amazon vs Google 云服务
热门文章
- java微信公众号短信验证码_解决微信端公众号网页获取短信验证码ajax重复调用两次的问题...
- 有道云笔记 markdown html,你不可不知的有道云笔记Markdown指南【进阶版】
- 使用ABAP批量下载有道云笔记中的图片
- 《上瘾:让用户养成使用习惯的四大产品逻辑》读书笔记摘录
- Python 计算两个连通子图距离_复杂网络分析之python利器NetworkX
- UITableView去掉Grouped样式的第一组Header组头
- flex布局中的自动占满剩下的内容
- 7-87 时间换算 (15 分)
- Linux 自签名ssl证书生成
- java版林地府邸种子_我的世界林地府邸地图种子代码分享