表单按钮
我们先来看一下某公司里的一个真实案例：
我们用input的button定义类似上面一个普通按钮，代码如下：
<input type="button" value="登录"/>
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
<input type="button" value="登录"/>
</form>
</body>
</html>
运行结果如图所示：
例2 配合js完成一些操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
<input type="button" value="登录"/>
<input type="button" value="注册" onclick="alert('您是否需要注册？')"/>
</form>
</body>
</html>
运行结果如下：
怎样实现上面的代码呢？
本质上是一张图片，如图所示：
<input type="image" src=" img/a.png"/>
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
<input type="button" value="登录"/>
<input type="button" value="注册" onclick="alert('您是否需要注册？')"/>
<input type="image" src=" img/a.png"/>
</form>
</body>
</html>
我们运行结果如下图所示：
我们再配合js进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>
<input type="button" value="登录"/>
<input type="button" value="注册" onclick="alert('您是否需要注册？')"/>
<input type="image" src=" img/a.png"/>
<input type="image" src=" img/a.png" onclick="alert('您是否需要加入购物车？')"/>
</form>
</body>
</html>
运行结果如图所示：
重置按钮
我们先观察一个现象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form>账号：<input type="text"/><br/>
密码：<input type="password"/><br/>
<input type="reset"/></form>
</body>
</html>
运行结果如图所示：
归纳结论：
定义重置按钮
作用：清空表单中数据
注意点：
重置按钮有默认的按钮标题（如重置）默认叫做重置
提交按钮
定义提交按钮
作用：将表单中的数据提交到远程服务器
注意点：
要想把表单中的数据提交到远程服务器，必须满足两个条件
1.告诉表单需要提交到哪个服务器。可以用form中action属性哪些数据需要提交？
2.告诉表单中哪些数据需要提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">账号：<input type="text" name="zhouxingzhi"/><br/>
密码：<input type="password" name="123456"/><br/>
<input type="reset"/><input type="submit" value="提交"/>
</form>
</body>
</html>
运行结果如图所示：
跳到简书的网页
观察地址栏的特点：‘
https://www.jianshu.com/?zhouxingzhi=zhouxingzhi&123456=123456
与input的取值是不是很相似。
理解就是假设简书有一台远程服务器，将表单的账号信息和密码信息提交到简书的那台远程服务器上
隐藏域的定义：
用于悄悄咪咪的收集用户的一些数据。隐藏域是不会出现在界面中的。
格式：
<input type="hidden" name="cc" value="555"/>
演绎到代码中去，观察有什么效果？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="https://www.jianshu.com/">账号：<input type="text" name="zhouxingzhi"/><br/>
密码：<input type="password" name="123456"/><br/>
<input type="reset"/><input type="submit" value="提交"/><br/>
<input type="hidden" name="cc" value="555"/>
</form>
</body>
</html>
运行结果如图所示：
对比研究一下：有何不同？
网友评论