Html学习总结--表单and js验证表单

写JS的form表单需要注意什么？

有人写的更好了我就直接贴链接了

W3school

http://www.w3school.com.cn/jsref/index.asp
有个问题是：
onSubmit事件经常用到return关键字为什么？

以下内容主要来自于W3school：

http://www.w3school.com.cn/html/html_forms.asp

<form>表单标签干什么大家都知道吧就是为了跟服务器做出响应比如登陆注册就是由表单来完成的。
先来看一下表单的属性：
这里写图片描述
action属性：请求路径，确定表单提交到服务器的地址比如www.baidu.com
method属性：请求方式常用两种 GET，POST

1. GET：是默认值 提交的数据会追加到请求路径上  追加是用？连接的  之后每一对数据使用&连接
因为请求路径长度有限，所有GET请求提交的数据也是有限的

2. POST：提交的数据不在请求路径上追加 意思就是不显示在地址栏上 提交的数据大小不显示

注意：
action属性省略的话，则action会被设置为当前页面
method默认是GET属性

GET使用环境：


如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

POST使用环境：

如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
如果要正确地被提交，每个输入字段必须设置一个 name 属性。

接下来讲一下 form中最重要的元素：
输入标签：<input> 元素
用于获取用户输入的信息 type属性值不同搜集的方式不同是最常用的标签。
常用输入类型：
1. text:文本框单行的输入字段默认宽度为20字符
2. password：密码框该字段的字符以黑圆显示
3. radio：单选框，表示一组互斥选项按钮中的一个，当一个按钮被选中的时候，之前选中的按钮就变为非选中前提name得一样
4. submit：提交按钮，会把表单数据发送给服务器，一般不写name属性否则会把“提交”这两个字提交到服务器定义用于向表单处理程序）提交表单的按钮。表单处理程序在表单的 action 属性中指定
5. checkbox：复选框
6. file：文件上传组件，提供“浏览”按下可以选择需要上传文件
7. hidden：隐藏字段，数据会发送给服务器，但是浏览器不进行显示
8. reset：重置按钮，将表单恢复到默认值
9. image：图形提交按钮，通过src给按钮是设置图片
10. button：普通按钮经常用于和javaScript结合使用

输入类型：

submit，reset

<input   type="submit"   value="提交">   
是提交按钮   type是按钮提交   value是按钮上显示的文字  

<input type="reset" value="重置">   重置作用

number

<input type="number"> 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

这里写图片描述

<!DOCTYPE html>
<html>
<body>

<p>
<form>
  数量（1 到 5 之间）：
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

</body>
</html>

这个时候就提示你范围在1到5之间没有提交
注意：IE9 及早期版本不支持 type=”number”

date加限制

<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
请输入 1980-01-01 之前的日期：<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
请输入 2000-01-01 之后的日期：<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit"> 
</form>

<p><b>注释：</b>
Internet Explorer 不支持 type="date"。</p>

</body>
</html>

这里写图片描述
注意：Firefox 或者Internet Explorer 11 以及更早版本不支持 type=”date”

<textarea>元素
定义多行输入字段（文本域）：

<!DOCTYPE html>
<html>
<body>
<textarea rows="10" cols="30">
</textarea>
</body>
</html>

输入类型还有好多就不一一列举了想详细了解的可以看W3school
注意： cols是列数 rows是行数
这里写图片描述

复选框checkbox：

<!DOCTYPE html>
<html>
<body>

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
<br><br>
<input type="submit">
</form> 

</body>
</html>

结果：
这里写图片描述
注意：value是传递给后台的数据 I have a bike 只是表面数据呈现给人看的 value=”Bike”才是真实值传递给后台

举例创造了一个text框和密码框

<!DOCTYPE html>
<html>
<body>

<form action="">
User name:<br>
<input type="text" name="userid" value="默认值">
<br>
User password:<br>
<input type="password" name="psw">
</form>

<p>密码字段中的字符被掩码（显示为星号或圆点）。</p>

</body>
</html>

结果：
这里写图片描述
注意：
value是默认值

radio栗子：

例子
<form>
    <label>你对什么运动感兴趣</label>
    <br />
   <label for="male">慢跑</label>
   <br/>
  <input type="radio" name="gender" id="male" />

  <label for="female">登山</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  <label for="控件id名称">
</form>

注意：lable标签是提示标签。

当标签的 for 属性中的值与某一控件的 id 属性相同时点击该标签时对应的控件就会获取焦点

radio表示单选框，checkbox表示复选框。

只有属性为name的标签内容才会被提交到目标服务器而不是id

同一组的单选按钮，name 取值一定要一致

所以标签如果要提交的话得设置name属性多个单选框的话同一个name属性那么只能选择一个

提一下：用 < fieldset> 组合表单数据
元素组合表单中的相关数据
元素为元素定义标题。
举例：

<!DOCTYPE html>
<html>
<body>

<form>
<fieldset>
<legend>我是小标题:</legend>
<input type="text" name="firstname" value="账号">
<br/>
<input type="text" name="lastname" value="密码">
<br/>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

效果图：
这里写图片描述

其他的input类型的标签就不一一介绍了
总结：

如果要提交标签上的内容一定得加上name而不是id
多个单选框radio 一个name只能选择一个单选框
当标签的 for 属性中的值与某一控件的 id 属性相同时点击该标签时对应的控件就会获取焦点
form表单中action属性表示表单内容提交目的地
method是提交方式 get不安全少量 post安全大量
标签中属性value是默认值的意思
submit最好不要有name 因为会连“提交”都会被提交

接下来讲一下另一个常用标签： <select>下拉列表
可以进行单选

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

举例：

<option value="first" selected>First</option>

举例：

<!DOCTYPE html>
<html>
<body>

<form >
<select name="selectcols" size="" multiple="multiple">
<option value="first1">first2</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="four1" selected>four</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>

注意：

option是代表一行
如果是第一项那么传递给服务器的结果是selectcols=first1
为什么不是first2？
因为option中的文本内容是给我们看的而value不同于上面标签的默认值在这里 value才是传递给服务器后台的真实值
<select>里的属性可以由name代表这个下拉表的名称，size表示下拉表可视选项数目，multiple表示可以多选，没有则表示不可以多选，<option>(选项)中的selected表示默认选项。

看一下size=”2“效果： 定义在select标签中
这里写图片描述
看一下 multiple=”multiple”效果： 定义在select标签中实现了多选 ctrl+鼠标左键就可以多选

看一下selected表示默认选项 定义在option选项中

上图也可以看到选项显示的是option的文本文字而不是 value

还有按钮标签：

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hello World!')">试试看</button>

</body>
</html>

效果图：
这里写图片描述

HTML5 <datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

举例：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

</body>
</html>

注意：Safari 或 IE9（以及更早的版本）不支持 datalist 标签。
当你在输入框中输入a或者A（不区分大小写）就会跳出下拉框 Opera 和 Safari 这两个选项
只要你输入的字母包含在选项中都会显示出来

最后贴一张 Input 属性图吧
这里写图片描述
这些属性还不是很全不过平时用用应该够了想更深入了解的话可以看一下
W3school HTML Input 属性

再附上一些有关的英文单词：方便大家理解：

form：表单
action:行动(提交的路径)
method：方法(提交的方式)
input：输入
type：类型
text：文本(文本输入项)
password：密码
radio：单选按钮
checkbox：复选框
file：文件(文件上传项)
hidden：隐藏字段
reset：重置(重置按钮)
button：按钮(普通按钮)
name：名称(元素名称)
value：值(输入项的内容)
size：大小(可以是文字字体的大小，也可以是输入框的宽度)
checked：被选中
readonly：只读
disabled：不可用的
maxlength：最大长度(输入框可以输入的最大长度)
select：选择(下拉列表项)
option：条目(下拉列表项)
textarea：区域(文本输入域)
submit：提交(提交按钮)
selected：选择(下拉列表被选中)

style：样式
color：颜色
font-size：字体大小
pink：粉红色
gold：金黄色
gray：灰色
blue：蓝色
red：红色
yellow：黄色
black：黑色
white：白色
background-color：背景颜色

border：边框
width：宽度
height：高度
margin：外边距
padding：内边距
float：浮动
clear：清除
none：无(元素不浮动)
left：左边
right：右边
both：都(同时)
display：显示方式
block：显示的(显示为块级元素)
inline：在一行(显示为内联元素)
div：块级元素的区域
span：内联元素的区域
element：元素
top：顶部
bottom：底部
product：产品，商品
header：头部信息
menu：菜单
show：显示
father：父亲
big：大的
small：小的