html中form表单的使用方法和介绍
一、表单赏析
二、了解表单
功能:用于搜集不同类型的用户输入的内容
有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者。
三、常用的表单元素
ü form 表单
ü input 表单元素,表单项
ü select和option 下拉菜单
ü textarea 文本域
(1)form元素
功能:用于创建一个表单
格式:<form></form>
基本用法:
重要属性:
1,action:表示当前表单中的内容提交给哪个页面进行处理
2,method:表示当前表单提交的方式,常见的有get和post方式,默认是get提交
(2)input元素
表示输入框,有多种形式,可以根据type属性来确定显示哪种输入框。
基本用法:
效果 :
注意细节:
1,对于input来说,它的type的默认值是text,表示单行文本
2,对于input,最好给它添加一个name属性,作用是用于将用户输入的内容提交给要处理这个数据的页面
GET提交与POST提交:
GET:
如果以get方式进行提交,但没有写上name属性,那么用户输入的内容是提交不了的,但是也会出现?这个标志:
POST:
当用户以post方式提交时,用户输入的内容不会放到地址栏里面,比较安全:
GET和POST小结:
1,GET会将用户输入的内容放到地址栏里面,使用GET请求不安全
2,POST不会将用户输入的内容放到地址栏里面,相对安全
细节:
1,每一个input标签都有一个value属性,不同类型的input, value的作用也不同
对于type=”text”来说,value可有可无,因为用户输入的内容都可以提交过去。
对于type=”radio”或type=”checkbox”来说,没有value,是提交不了的。
2,对于type=”radio”来说,如果你只想选择一个,需要给每个input添加一个name属性,属性值也必须一致,如果不添加,就不能满足单选框的需求。
3,关于单行文本的宽度,可以使用size属性来设置,表示字符长度,实际上不用,我们一般是通过CSS进行控制的。
(3)select和option
作用:用来实现下拉列表
格式:<select>
<option>内容</option>
<option>内容</option>
<option>内容</option>
</select>
基本用法:
注意点:
1,默认情况下,提交时,它将option里面的内容作为提交的内容,但是通常我们不这样做,我们通常给opton设置一个value属性,属性值我们通常用数字。
使用value后的情况如下:
我们可以使用selected属性让某个option处理默认选中状态。
(3)textarea
作用:提供输入大量文本的输入框,比如,QQ空间中发表状态,贴吧发表贴子等。
格式:<textarea></textarea>
基本用法:
html中form表单的使用方法和介绍相关推荐
- javascript中FORM表单的submit()方法经验教训.
@author songfeng 因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...
- html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法 标签是 ...
- php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话 在使用form表单的时候,一旦点击提交触发sub ...
- [转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
- php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要 腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...
- HTML中form表单的应用
1.form表单标记 form表单以<form>标记开始,以</form>标记结束 而在form表单中的属性 action 规定当提交表单时向何处发送表单数据. method ...
- 原生js实现form表单序列化的方法
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- form表单以ajax方法提交,附加额外的数据
在项目中有个添加账户的模块,如下图.填写的信息以表单是形式ajax的方法提交,但是又需要添加额外信息给后台(比如:创建人),首先要引入JQuery.js库,和jquery.form.js var op ...
最新文章
- 消费金融首推即时沟通工具“马上”探索科技金融发展新方向
- Swift 5将强制执行内存独占访问
- 过多提交(Over Posting)
- 简单两步干掉WordPress里面的fonts.googleapis
- 采用计算机发布调度命令时 必须严格遵守,实用文档其他之铁路调度命令格式图片调度命令规范格式...
- mysql call procedure into_mysql存储过程之创建(CREATE PROCEDURE)和调用(CALL)及变量...
- MySql主从同步最小配置
- opencv对图片的变换
- 拓端tecdat|SAS用梯度提升回归树(GBDT)迁移学习预测抵押贷款拖欠风险和垃圾电子邮件数据
- python opencv 创建滑动条调整值
- 利用C#编写一个附和闭合导线平差程序
- <EDEM MBD案例02>EDEM-Adams
- Matlab S-function 使用总结
- Linux系统扩容硬盘
- MATLAB导入LTspice RAW格式文件教程(绘制波特图)
- 数据挖掘并不遥远( 转载)
- python中列表(list)的基本定义和用法
- vivos9开启定位服务设置步骤介绍(图文教程)
- C语言Windows图形界面程序学习(一)
- MBus协议详解(二)
热门文章
- 数据分析师23-京东商业数据分析有感
- 计算机自杀式软件--USBKill
- 【原创】关于2013、2014款Macbook Air安装Windows的那点事
- 20210706 为什么edge无法修改主页?或者启动后两个页面?
- 网页设计师和网页前端开发我该选择哪一个
- RMAN恢复Oracle数据库到不同的服务器
- Java项目:医院挂号预约管理系统(java+SSM+HTML+JavaScript+jsp+mysql)
- 【地理空间】初识OpenStreetMap
- mysql-高级命令(1)和一些函数(悟已往之不谏,知来者之可追)
- 同一台虚拟服务器多个域名,一台服务器上可以配置多个域名