from表单的作用、组成和用法

简介: from表单的作用、组成和用法

from表单的作用表单在网页中主要负责数据采集功能,它用<form>标签定义。用户输入的信息都要包含在form标签中,点击提交后,<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里,经过服务器上的 ASP 或 PHP 等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。


2.表单的组成表单标签、表单域、表单按钮。1.表单标签  是指<form>标签本身,它是一个包含表单元素的区域,使用<form></form>定义 2.表单域  是<form>标签中用来收集用户输入的每一项,通常用input标签来定义,input标签有不同的类型,对应用户不同的数据。


(比如:文本域、下拉列表、单选框、复选框等等)3.表单按钮  用来提交<form>表单中的所有信息到服务器表单标签的格式:<form action="url" method=get|post name="myform" ></form>  -name:表单提交时的名称  -action:提交到的地址 -method:提交方式,


默认为getpost和get区别:


1.数据提交方式,get把提交的数据url可以看到,post看不到2.get一般用提交少量数据,post用来提交大量数据3.get最多提交2kb数据,post理论上没有限制4.get提交的数据在浏览器历史记录中,安全性不好


文本框 <input type="text" /> 属性: name:定义控件名称 value:指定控件初始值   密码框 <input type="password" /> 属性: name:定义控件名称 value:指定控件初始值   单选按钮 <input type="radio" /> 属性: name:定义控件名称 value:指定控件初始值 checked:设置控件初始状态是否被选中 一定要相同的name属性达到单选的效果


性别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女   复选框 <input type="checkbox"  />


属性: name:定义控件名称 value:指定控件初始值 checked:设置控件初始状态是否被选中 例如:爱好:          <input type="checkbox" checked/>游戏          <input type="checkbox"/>唱歌          <input type="checkbox"/>跳舞  


文件 <input type="file"/> 属性: name:定义控件名称 使用file类型的input时要注意以下几点 1.form表单的method属性值要为post


1.form要加enctype="multipart/form-data"属性,这个属性说明了我们的文件以二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。 默认地,表单数据会编码为 "application/x-www-form-urlencoded",不能用于文件上传  <form action="" method="post" enctype="multipart/form-data">        <input type="file" name="file1"/>  </form>   隐藏区域 <input type="hidden"  /> 属性: name:定义控件名称 value:指定控件初始值   按钮 <input type="button"  /> 属性: name:定义控件名称 value:指定控件初始值 不具有提交功能   提交按钮 <input type="submit"  /> 属性: name:定义控件名称 value:指定按钮表面显示文字   重置按钮 <input type="reset"  /> 属性: name:定义控件名称 value:指定按钮表面显示文字   图像图片按钮 <input type="image" src="URL"/> 属性: name:定义控件名称 src:指定图像地址   按钮     <button>按钮</button> 属性: type:button/submit/reset,默认值为submit  


下拉列表框 select属性:                                      <select> name:此列表框的名字                              <option></option> multiple:多选,不用赋值                         <option></option> size :规定下拉列表中可见选项的数目(显示几行)   </select> disabled:规定禁用该下拉列表 option属性: selected :用来指定默认的选项 value: 用来给<option>指定的那一个选项赋值,这个值是要传送到服务器上的,服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的 下拉列表框续 <select name="" id="">        <optgroup label="北京">        <option value="1">东城区</option>        <option value="2">西城区</option>        <option value="3">海淀区</option>        </optgroup>        <optgroup label="河北省">               <option value="4">石家庄</option>               <option value="5">保定市</option>               <option value="6">沧州市</option>        </optgroup> </select>

相关文章
|
7月前
|
存储 JavaScript 容器
vuex的五个属性及使用方法示例
vuex的五个属性及使用方法示例
145 0
|
缓存 JavaScript 前端开发
Vue系列(二)之 基础语法上篇【插值,指令,过滤器,计算属性监听属性】以及购物车实现
Vue系列(二)之 基础语法上篇【插值,指令,过滤器,计算属性监听属性】以及购物车实现
|
JavaScript 前端开发
js正则表达式的作用及使用方法
js正则表达式的作用及使用方法
108 1
|
7月前
|
机器学习/深度学习 存储 算法
C++ 模版函数介绍:介绍模版函数的基本概念、用法和作用
C++ 模版函数介绍:介绍模版函数的基本概念、用法和作用
75 1
|
7月前
|
iOS开发
表单输入绑定 基本用法
表单输入绑定 基本用法
|
JavaScript 前端开发 UED
js事件的作用和用法
js事件的作用和用法
115 0
|
存储 数据挖掘 数据库
data的含义与作用及使用方法
data的含义与作用及使用方法
6435 0
|
JSON 前端开发 数据格式
前端(二十一):label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
160 0
element plus 表单验证的字段名解释以及使用方法
element plus 表单验证的字段名解释以及使用方法
179 0
下一篇
DataWorks