html中form表单的使用方法和介绍
from表单的使用方法
一、表单赏析
二、了解表单
功能:用于搜集不同类型的用户输入的内容
有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者。
三、常用的表单元素
ü 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:
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>
基本用法:
***************************************************************************************
转载于:
https://blog.csdn.net/wang1006008051/article/details/78157325
html中form表单的使用方法和介绍的更多相关文章
- MVC中Form表单的提交
概述 Web页面进行Form表单提交是数据提交的一种,在MVC中Form表单提交到服务器.服务端接受Form表单的方式有多种,如果一个Form有2个submit按钮,那后台如何判断是哪个按钮提交的数据 ...
- php form表单ajax上传图片方法
form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...
- laravel中form表单,ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
- django中form表单的提交:
一,关于表单: 表单在百度百科的解释: 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...
- Laravel框架中Form表单Get请求搜索(在此感谢[https://simon8.com])
首先看一下HTML部分的Form表单 <form role="search" method="get" id="searchform" ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- JS form表单提交的方法
1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...
- vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...
- django项目中form表单和ajax的文件上传功能。
form表单文件上传 路由 # from表单上传 path('formupload/',apply.formupload,name='formupload/'), 方法 # form表单文件上传 de ...
随机推荐
- h5完美实现无刷新上传并附带上传效果
附带上传源码如下: <!DOCTYPE html> <html> <head> <title>测试上传功能</title> <meta ...
- How to Make a Computer Operating System
How to Make a Computer Operating System 如何制作一个操作系统(翻译版) 原文地址:Github:How to Make a Computer Operating ...
- js--深拷贝与浅拷贝
对象:只针对于Object和Array这样的引用数据类型 说明:浅拷贝只复制指向某个对象的指针,而不是复制对象的本身,新旧对象还是共享一块内存.但深拷贝会另外创造一个一模一样的对象,新的对象跟原对象不 ...
- grep 以及find 命令
grep 以及find 命令 1. find 命令 Linux 下find 命令在目录结构中搜索文件,并执行指定的操作.Linux 下find 命令提供了相当多的查找条件,功能很强大.由于find 具 ...
- javaScript数据类型的一些小细节
JavaScript的数据类型有哪些就不说了,没必要. 由于JavaScript是一个弱类型的语言,就是定义的时候不需要定义数据类型,数据类型自动根据变量值来确定.而在JavaScript里面,数据类 ...
- Mac连接非22端口linux服务器
Mac连接非22端口linux服务器 原文链接:https://www.cnblogs.com/blog5277/p/9507080.html 原文作者:博客园--曲高终和寡 1:ssh连接 打开终端 ...
- 《Java8实战》读书笔记
个人感悟: 1.lambda表达式,补充了JAVA在面向对象之外,面向过程的一面.在写面向过程代码的时候更方面了,甚至可以利用代码来做类似数学公式的运算(P64) 2.流,对集合的操作,就像用SQL对 ...
- The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration
用过Mysql的人都知道,这个时区问题真个磨人的小妖精,哪天一忘记设置了就会出来磨磨你!!! 之前用的解决方法都是在Mysql的配置上添加与时区相关的配置,但是今天看到一篇博客:https://blo ...
- c++ 线程间通信方式
一:两个进程间的两个线程通信,相当于进程间通信 二:一个进程中的两个线程间通信 通信方式: 1.互斥锁 mutex; lock_guard (在构造函数里加锁,在析构函数里解锁) unique_loc ...
- 02-VC中的变量类型
lp: long pointerb: BOOLsz: string zero(以0结尾的字符串) typedef const char* LPCSTRtypedef unsigned long DWO ...