Form表单中的元素 控件集

<form action="http://wichkelysmart.com/hfhtmlcss/contest.php" method="post"></form>

表单的所有内容都包含在form标签中  action属性中的内容将表单提交的的数据交给wichkelysmart.com链接内的hftmlcss文件夹中的contest.php服务器脚本处理
所使用的方法是post

1:<input type="text" name="1" value="value控制文本框内初始化的值">
2:<input type="submit" name="2" value="提交按钮由value设置"> 
3:女性:<input name="3" type="radio" value="选择1">
  不男不女:<input type="radio" name="3" value="复选中的value是传递给服务器的值"><br><br><br>
4:苹果<input type="checkbox" name="4" value="复选1">
  草莓<input type="checkbox" name="4" value="复选中的value是传递给服务器的值">
  香蕉<input type="checkbox" name="4" value="复选3">

Type确定是什么类型的控件,浏览器会把name当做标签把收集到的数据发送到服务器,这样服务器才能区分谁是谁

例如如果在一个名字为“zip”的text<input>元素中输入了邮政编码90050,表单提交时就会把“zip=90050”发送到服务器(HEAD FIRST HTML第677页练习)

注意name要与后台脚本文档代码中的一致,在使用别人编写的一个服务器脚本时,他必须告诉我要使用哪些元素名

复选框浏览器会发送“4=香蕉&苹果&草莓”到服务器

无需知道像服务器发送数据的后台细节 但是需要知道服务器脚本期望得到的表单元素的名字和类型

与后台的交互式通过URL进行的 表单里的数据通过URL与后台脚本进行数据传输(代码要相互呼应——即表单名字和类型)

浏览器向服务器传送收集到得数据——用表单

浏览器处理服务器传回的数据——用ajax

表单发送给服务器的数据与name value和text文本框中的内容相关

text:文本框,input默认的type,不写就是这个,value表示文本框里的值。
password:密码框,value表示密码框里的值。
submit:提交按钮,value表示按钮上的文字
button:普通按钮,value表示按钮上的文字
reset:重置按钮,value表示按钮上的文字
radio:单选框,value表示该单选框的真实值(一般真实值和数据库对应,显示的值给用户参考的)
checkbox:复选框,value表示该复选框的真实值
hindden:隐藏表单域,value表示该表单域的值。
单选和多选:
input中的value可以理解为传送给服务器的值
type可以是button普通按钮,submit提交按钮,reset重设按钮,radio单选框,checkbox复选框,passward密码输入框
 是提交给服务器的,服务器语言会调用里面的值 你没value的话,服务器就没数据
 服务器通过 name 知道传的是谁的值 value则是对应的值是

 5:<textarea name="5" rows="10" cols="48">这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字</textarea>

rows设置浏览器文本区高度 cols设置宽度 开始和结束标签中间为初始化文字 在textarea元素中加个maxlength属性可以限制输入文字的的字符

 6:请选择<select name="6">
                 <option value="传递给服务器的数据">选择1</option>
                <option value="传递给服务器的数据">选择2</option>
                <option value="传递给服务器的数据" selected>选择3</option>
                <option value="传递给服务器的数据">选择4</option>
           </select>

以上数据提交后浏览器会提交6=”传送服务器的数据”,即name=”value“ 到服务器,与选择的按钮内容无关

selected布尔属性,布尔属性不需要值,当进入页面时这个选项会被默认选中

 form标签中的表单元素可以是input也可以是textarea select option

7:<input type="number" min="0" max="20" value="请输入数字"><br><br><br>
输入数字和允许输入数字的最大值最小值<br><br><br>
8:<input type="range" min="0" max="20" step="5"><br><br><br>
range类似number 只是会显示一个滑动条而 其中step设置间隔数(步数)<br><br><br>
9:<input type="color"><br><br><br>
点击弹出颜色选框<br><br><br>
10:<input type="date"><br><br><br>
点击后弹出一个时间选择框 火狐不支持此属性会 显示text文本框
11:<input type="email">
    <input type="tel">
    <input type="url">
手机端会得到一个定制的键盘

 

<input type="checkbox" name="extras[]" value="catalog" checked>

编写name.php服务器脚本所用的脚本脚本语言(php)希望得到一点提示,想知道一个表单变量包含多少个值,提供这个提示的做法就是在名字后面增加一个”[]“

 

<input type="passworld" name="secret">

输入的文本会加掩码

<input type="file" name="doc">

可以选择上传一个文件 文件内容会上传到服务器,必须使用post方法

<input type="text" placeholder="Buckaroo Banzai">

大多数input标签都可以使用placeholder属性,他会提示你要在文本框中输入的内容

<input type="text" placeholder="1" required>

required是一个布尔属性, 也就是这个文本框必须输入内容后才可以提交

二、

posted @ 2016-10-13 09:35  Cheney.cai  阅读(2653)  评论(0编辑  收藏  举报