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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

codingcoge 2018-05-15 16:06:56 浏览877
展开阅读全文

写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类型的标签就不一一介绍了
总结:

  1. 如果要提交标签上的内容 一定得加上name而不是id

  2. 多个单选框radio 一个name只能选择一个单选框

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

  4. form表单中action属性表示表单内容提交目的地
    method是提交方式 get不安全 少量 post安全大量

  5. 标签中属性value是默认值的意思

  6. 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>

注意:

  1. option是代表一行

  2. 如果是第一项 那么传递给服务器的结果是selectcols=first1
    为什么不是first2?
    因为option中的文本内容是给我们看的 而value不同于上面标签的默认值 在这里 value才是传递给服务器后台的真实值

  3. <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:小的

以上内容主要来自于W3school:

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

网友评论

登录后评论
0/500
评论
codingcoge
+ 关注