form 表

理解动态网和静态网页区别

动态网页技术:能够实现交互，就叫动态网页技术

• 交互:能够与后台交换数据（例如:ajax,node.js php java等）

静态网页技术:不能实现交互

• javascript,jquery都是静态网页，不过是实现静态网页上的动态效果

表单的典型应用

• 注册用户
• 收集信息
• 反馈信息
• 搜索引擎

表单的基本结构

<form action="http://www.baidu.com" method="get">
请输入用户名:<input type="text">
            <input type="submit" value="提交">
 </form>
action="http://www.baidu.com/#":提交的url,#表示提交当前页面
method="post/get":提交/获取数据方式
    ·get是从服务器上获取数据，post是向服务器传送数据。
    ·get传输数据较小(2kb),post传输大批量数据
    ·get安全性低，post安全性，get传输效率高

表单的元素介绍

文本框:text
请输入用户名:<input type="text"  value="李超凡" size="10" maxlength="6"/>
type="text" :文本框
value="李超凡":设置文本框的初始值
size="10":设置文本框的大小
maxlength="6":文本框最大限制位数（中文，英文，特殊符号都是一个字符）
minlength="6":文本框最小限制位数

密码框：password
<input type="password" size="20" maxlength="6" value="111111" name="lucy"/>

单选框:radio
<input type="radio" name="o" checked="checked">
注意: name="o"要有两个相同的名字
checked="checked" or checked:默认选中

复选框:checkbox
<input type="checkbox" name="sport" checked><label>打篮球</label>

下拉列表框
<select>:下拉列表
  <option value="请选择">请选择</option>:每一个列表项
  <option value="1995">1995</option>
  <option value="1996">1996</option>
  <option selected>1997</option>
  <option>1998</option>
</select>
selected="selected" or selected：默认选中

重置按钮:reset
提交按钮:submit
按钮:button
 <input type="reset" value="重置" />
 <input type="submit" value="提交" />
 <input type="button" value="登陆" />

多行文本框
<textarea rows="6" cols="50" style="resize: none">
    有道翻译提供即时免费的中文、英语、日语、韩语、法语、俄语、
    西班牙语、葡萄牙语、越南语全文翻译、网页翻译、文档翻译服务
</textarea>
rows="6" :行数
cols="50"" :列数
style="resize: none":不允许改变窗口的大小

HTML5表单新增属性，标签

text:<input type="text" placeholder="文本框">
 placeholder="文本框":默认值，且带有灰色样式
email:<input type="email"><br><br>
 type="email":会有邮箱验证
url:<input type="url"><br><br>
type="url":url验证(http://www.baidu.com)
search:<input type="search"><br><br>:搜索
number:<input type="number"><br><br>:数字
date:<input type="date">:日期
datetime-local:<input type="datetime-local">:日期时分
month:<input type="month">:月份
week:<input type="week"><br><br>:周
color:<input type="color"><br><br>:颜色
file:<input type="file" multiple="multiple">
type="file":选择文件
multiple="multiple":可以选择多个

检索选项:

<input type="text" list="zhangjian">
<datalist id="zhangjian">：数据下拉
    <option value="杨..."></option>
    <option value="曹操"></option>
    <option value="项羽"></option>
    <option value="张飞"></option>
</datalist>
注意:id="zhangjian" 和 list="zhangjian"：属性值要相同

获取某一个值在对某一个进去赋值

<form oninput="count.value=parseInt(num1.value)+parseInt(num2.value)">
    请输入第一只猴子摘桃的个数:<input type="text" id="num1">
    请输入第二只猴子摘桃的个数:<input type="text" id="num2">
    <output id="count">?</output>
</form>
oninput="count.value=parseInt(num1.value)+parseInt(num2.value)"
output的value=第一个文本的value值+第二个文本框的value值
parseInt():表示转换整数类型
字符串与字符串之间在做加运算时候只能做拼接

lang="zh-cn":简体中文
lang="en":英文
lang="zh":中文

disabled="disabled":禁止使用
禁止使用:<input type="text" disabled="disabled">
 readonly="readonly" :只读
只读:<input type="text" readonly="readonly" placeholder="111111">
 multiple="multiple":展开，多选
 <select multiple="multiple">
     <option>html</option>
     <option>css</option>
     <option>js</option>
 </select>
 <optgroup label="编程科目"> </optgroup>:分组
 <select>
     <optgroup label="编程科目">
         <option>jquery</option>
         <option>bootstarp</option>
         <option>cnpm</option>
     </optgroup>
     <optgroup label="理科科目">
         <option>数学</option>
         <option>物理</option>
         <option>化学</option>
     </optgroup>
 </select>