form表单二之几种常见的表单

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>几种常见的表单</title><!-- 文本输入提交输入单选按钮输入复选框输入1.文本输入: text <ipnut>元素用于输入一行文本.有一些属性可以为这个控件设置最大字符个数和宽度<input type="text" name="fullname">这个input元素是一个void元素,所以后面没有内容2.提交输入: submit <input>元素会创建一个按钮,允许你提交表单.点击这个按钮时,浏览器会把表单发送到服务器脚本进行处理提交按钮要指定submit作为input元素的type属性.3.单选按钮输入: radio <input>元素会创建包含多个按钮的控件,但是一次只能选择其中一个按钮.例如   <input type="radio" name="hotornot" value="hot"><input type="radio" name="hotornot" value="not">PS:1.每个选项实用radio2.与一组给定选项关联的单选按钮必须有相同的名字(name)..3.不过没个选项可以有不同的值.(value)4.复选框输入:checkbox <input>元素会创建一个复选框控件,可以选中也可以不选中.多个复选框可以放在一起,可以根据需要选中多个选项.<input type="checkbox" name="spice" value="salt"><input type="checkbox" name="spice" value="pepper"><input type="checkbox" name="spice" value="garlic">相关的复选框也共用一个名字每个复选框有一个不同的值.不是所有表单元素都是input元素,还有其他元素例如用于菜单的select,用于输入多行文本的<textarea>5.文本区<textarea>元素会创建一个多行的文本区,可以在其中输入多行文本.若输入的文本在文本区中放不下,右边还会出现一个滚动条.<textarea name="conments" rows="10" cols="48"></textarea><textarea>元素不是一个空元素,有开始和结束标记使用name属性为元素指定一个唯一的名字cols属性告诉浏览器文本区宽度为多少个字符开始和结束标记之间的所有文本会成为浏览器文本区控件中的初始文本6.select 元素会在web页面中创建一个菜单控件.菜单提供了一种从一组选项中做出选择的方法.<select>元素与下面的<option>元素结合使用可以创建一个菜单.<select name="characters"><option value="buckaroo" > buckaroo banzai </option><option value="tommy" >perfect </option><option value="penny"> penny </option><option value="jersey">new jersey</opton><option value="john"> john parker</option></select>如上所示,select元素包围所有菜单选项,把他们组合为一个菜单. 类似其他表单元素一样,要用name属性为select元素指定一个唯一的名字7.option : <option>元素与select元素结合使用可以创建菜单.使用option元素来表示各个菜单项.点击菜单后,会下拉出菜单项8.利用HTML5,可以得到更专用的输入表单数字输入   number <ipnut>元素会限制只能输入数字.甚至可以用可选的属性指定这个元素允许的最大数和最小数type为number<input type="number" min="0" max="20">范围输入: range <input> 元素类似number,只是它会显示一个滑动条.而不是一个输入框.<ipnut type="range" min="0" max="20" step="5">number和range都有一个可选的step属性用于指定数值的间隔数(步长)颜色输入: 使用color <input>可以指定一个颜色.单击这个控件时候,会弹出一个颜色选择器,允许你选择一个颜色,而不必输入颜色值或名日期输入: 使用date <input>元素时,可以利用一个日期选择控件指定日期.这个控件会创建一个合法的日期格式串,发送到服务器脚本emaile输入 : email <input>元素就是一个文本输入元素,只不过在一些移动浏览器上,开始输入email时,你会得到一个方便输入emaile的键盘.tel输入: tel <input>元素也只是一个文本输入元素不过与email类似,它会在一些移动设备上弹出一个定制键盘url输入:与email和tel类似,url <input>也只是一个文本输入元素,不过在一些移动设备上弹出一个定制键盘.PS: email和tel以及url都是text<input>的变种,在桌面浏览器上,你看不出任何差别.不过在一些移动浏览器上他们会得到一个定制键盘,可以更容易 的输入你需要的字符.如/ .@ 和数字小贴士:1.为什么option元素没有name属性?所有其他元素都有名字.答:所有<option>实际上是菜单的一部分,而菜单有<select>元素创建.所以我们只需要为整个菜单提供一个名字就可以了.2.input是一个内联元素ok,下面看一个综合例子--></head><body><h1>The Starbuzz Bean Machine</h1><h2>Fill out the form below and click "order now" to order</h2><!-- 确定form表单元素里加入哪些内容 --><!-- 1.需要知道将处理表单数据的服务器脚本url. --><form action="http://starbuzzcoffee.com/processorder.php" method="post"><p>Choose your beans:<select name="beans"><option value="House Blend">House Blend</option><option value="Bolivia">Shade Grown Bolivia Supremo</option><option value="Guatemala">Organic Guatemala</option><option value="Kenya">Kenya</option></select><!-- 浏览器将表单元素的名和值打包时,它会使用<select>元素的名和所选选项的值.例如本例子中,浏览器将会向服务器发送 beans = "House Blend"--></p><p><!-- 单选框 --><input type="radio" name="beantype" id="" value="whole" checked="" />Whole bean <br><input type="radio" name="beantype" id="" value="ground" />Ground<!-- name要相同,注意我们通常把单选按钮的标签放在元素的右边 --><!-- 另外,如果我们为单选按钮元素增加一个布尔属性checked,浏览器就会默认选中这个元素Ps:不需要值,只要有属性checked,这个输入控件就会选中--></p><p>Extras:<br><!-- 注意这里的extras[],这是一个合法的表单元素名,这里是因为服务器脚本希望得到一点提示,想知道一个表单变量可能包含多个值,提供这个提示的做法就是在名字后面增加一个[]--><input name="extras[]" type="checkbox"  value="Gift" checked>Gift wrap <br><input name="extras[]" type="checkbox" value="catalog">Include catalog with order</p><p><!-- 数字控件,限制购买数量在1-10 -->Number of bags : <input type="number" name="bags" id="" value="" min="1" max="10" /><br></p><p>Must arrive by date: <input type="date" name="date" id="" value="" /><!-- 日期控件 --></p><p>Ship to:<br>Name: <input type="text" name="name" id="" value="" /> <br>Address: <input type="text" name="address" id="" value="" /> <br>City: <input type="text" name="city" id="" value="" /> <br>State: <input type="text" name="state" id="" value="" /> <br>Zip: <input type="text" name="zip" id="" value="" /> <br>Phone: <input type="tel" name="phone" id="" value="" /> <br></p><!-- name属性相当于用户输入数据的一个标识符,没个name属性设置为一个不同的值. --><!-- 关于name属性:相当于表单和处理表单的服务器脚本之间的粘合剂 --><!-- 提交表单时,浏览器会使用这些唯一的名字打包所有数据 --><p>Customer Comments:<br><textarea name="comments" rows="10" cols="50"></textarea></p><p><input type="submit" name="" id="" value="Order Now" /></p></form></body>
</html>

form表单二之几种常见的表单相关推荐

Form表单, 4种常见的表单提交方式
浏览器行为:Form表单提交 1.form表单常用属性 1 2 3 4 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name: ...
php表单传值哪几种方式,PHP表单传值的方式有哪些？
本篇文章主要给大家介绍PHP表单传值的两种方式,一种是通过$_GET变量 .另一种是通过$_POST变量.(相关推荐:<PHP教程>) 下面我们就结合具体的PHP代码示例给大家介绍,PHP ...
四种常见的表单提交数据的方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...
Win32反汇编（二）几种常见的指令反汇编详解：EAX、MOVSX与MOVZX、LEA、SUB、CMP与转移指令
前言作者:浪子花梦,一个有趣的程序员 ~ 此系列文章都是一些基础的文章,每篇文章都通过几个小例子快速的了解 Win32反汇编与OD的使用,在此作个笔记如若对您有帮助,记得三连哟 ~ 前文链接 Wi ...
所有表单对象_【第十课】常见的表单
前言从零开始学前端系列课程,与传统的视频大课堂教学不同,没有填鸭:也普通做练习题的方式不同,没有假想的模拟题. 本课程拆出80个左右必须掌握的技能点,并对其分组,从易到难地列出学习曲线.同时从真实项 ...
两种常见电商sku的设计
在电商系统中,商品sku和sku模型至关重要,是整个电商系统的重要组成部分之一,下面通过一些简单的知识整理和分析,讲解一下sku属性管理和常见的建模方式. 一.sku的定义及概念的统一 1.什么是sk ...
五种常见的聚类算法总结
目录一.关于聚类的基础描述 1.1 聚类与分类的区别 1.2 聚类的概念 1.3 聚类的步骤二.几种常见的聚类算法 2.1 K-means聚类算法 1) K-means算法的流程: 2)K- ...
JS中4种常见的内存泄漏
一.什么是内存泄漏本质上讲,内存泄漏是当一块内存不再被应用程序使用的时候,由于某种原因,这块内存没有返还给操作系统或空闲内存池的现象. 二.几种常见的内存泄漏 1.意外的全局变量一个未声明变量的引 ...
九齐单片机NY8B062D单按键控制4种LED状态
/* =========================================================================* Project: 单按键控制4种LED状态* ...

form表单二之几种常见的表单

form表单二之几种常见的表单相关推荐

最新文章

热门文章