<!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.每个选项实用radio
2.与一组给定选项关联的单选按钮必须有相同的名字(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>
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
