form表单

form表单

表单标签作用
​
用于将客户端的数据提交给服务器，需要提交大量数据的场景，通常会使用到表单。
​
表单标签名字：form，注意与from区别。
​
表单在网页上不可见，只是一个容器。
​
一个网页即可以有一个或多个table，也可以有一个或多个form。
​
//表格是用来定义html布局的，
//表单是收集客户端数据提交到服务器的。

form常用的属性

常用属性	作用
action	指定服务器提交的地址，Servlet/html
method	提交的方法有两种：GET或POST，大小写不敏感，默认为：GET

GET与POST在格式上的区别

提交方法	特点
GET	默认是GET，参数会显示在地址栏上，地址与参数之间使用?分隔。参数之间使用&符号分隔
POST	数据提交更加安全，参数不会显示在地址栏上，通常使用POST方式提交数据

注意：GET和POST，在书写时，大小写不敏感。

表单中的控件

文本框 
<inputtype="text" name="username" placeholder="请输入用户名">
type：属性默认为text
name：控件的名字，名字是给服务器使用的  
value：文本框中的值
readonly：只读，不能修改 数据能提交给服务器   
disabled：不可用，数据不能提交给服务器。
placeholder:默认值
    
    
密码框 
<input  type="password"  name="password" placeholder="请输入密码">       
输入的字符不可见，用*号替代
    
    
单选框 
<input type="radio" name="gender" value="男" checked="checked">男
checked：默认选中某项
value：必须要指定value才有值 
       名字相同的单选框是同一组，一组中只能选中一个。
​
复选框 
<input type="checkbox" name="hobby" value="游泳">游泳
checked：默认是选中
value：选中这项的值    
    
    
下拉列表
     <select name="select" id="select">
                    <option value="本科">本科</option>
                    <option value="大专">大专</option>
                    <option value="高中" selected>高中</option>
     </select>
    
<select> 容器，指定name属性，默认只能选中一项   
multiple：设置为多选
size：显示多少项  
<option> 其中一项   value: 建议加上value选中这一项的值
selected: 默认选中的项    
        
    
隐藏表单域   
<input type="hidden" name="id" value="9324879023842">   
name：表单项的名字
value：表单项的值 在表单上不可见，但可以将数据提交给服务器，一般用于一些不需要用户看到的数据。
    
文件域 
<input type="file" name="photo" accept="image/*">   
accept: 指定文件的类型，如：image/gif
如果省略accept，表示可以接收任意类型的数据    
    
    
多行文本域   <textarea name="intro" cols="50" rows="5">默认值</textarea>
rows：行数
cols：列数 
注：没有value值，主体部分就是它的值
    
    
提交按钮    
<input type="submit" value="注册"/>   
value：按钮上的文字    
将整个表单提交给服务器，即从<form>到</form>之间的所有表单项内容都提交给服务器 
    
    
重置按钮    
    <input type="reset" value="重置"/>        还原到开始的状态
    
​
普通按钮（两种写法）  
    <input type="button" value="按钮"/>
    <button>内容（可以文字或图片等）</button>       
    没有功能，用于后期JavaScript程序开发
    
    
    
图片按钮    
    <input type="image" src="img/regbtn.jpg">       
    有submit的功能，按钮上有一个图片

HTML5中新增的type类型

不同的浏览器支持上有差异，有些浏览器依然不支持。

值	描述
color	定义拾色器
date	定义日期字段（带有 calendar 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
number	定义带有 spinner 控件的数字字段
range	定义带有 slider 控件的数字字段
search	定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。
tel	定义用于电话号码的文本字段，在手机上操作会出现输入数字的键盘。
url	定义用于 URL 的文本字段，在手机上操作会出现输入网址的键盘。