整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

「测试开发全栈-HTML」(20) 表单元素业务整合示例(上)

于表单中可以用的元素和控件，我们已经学习了<input>、<select>和<textarea>，今天准备做一个综合的业务示例。

按照下面这张图，我们来实现吧!

首先，对这张图片里的内容进行下业务拆解，可以看到顶部 青春不常在，抓紧谈恋爱 是一部分，下面的是另一部分。上面部分使用标题标签就可以，下面可以使用表单标签来展示。

先来第一行的性别，男女

看下实现效果:

对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>恋爱网站</title>

</head>

<body>

<!--顶部展示-->

<h4>青春不常在，抓紧谈恋爱</h4>


<!--下面是table部分展示-->

<table width="500">

<tr><!--一行展示-->

<td><!--每一行的左边展示-->

性别:

</td>

<td><!--每一行的右边展示-->

<input type="radio" name="sex"> <img src="1.jpeg" width="15" height="10"> 男

<input type="radio" name="sex"> <img src="1.jpeg" width="15" height="10"> 女

</td>

</tr>

</table>

</body>

</html>


对页面的代码进行了更多的优化，可以在图片上时进行点击

<body>

<!--顶部展示-->

<h4>青春不常在，抓紧谈恋爱</h4>


<!--下面是table部分展示-->

<table width="500">

<tr><!--一行展示-->

<td><!--每一行的左边展示-->

性别:

</td>

<td><!--每一行的右边展示-->

<input type="radio" name="sex" id="nan"> <label for="nan"><img src="1.jpeg" width="15" height="10"> 男</label>

<input type="radio" name="sex" id="nv"> <label for="nv"><img src="1.jpeg" width="15" height="10"> 女</label>

</td>

</tr>

</table>

</body>

页面效果是没有变化的

接着我们看看第二行的效果图:

对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>恋爱网站</title>

</head>

<body>

<!--顶部展示-->

<h4>青春不常在，抓紧谈恋爱</h4>


<!--下面是table部分展示-->

<table width="800">

<tr><!--一行展示-->

<td><!--每一行的左边展示-->

性别:

</td>

<td><!--每一行的右边展示-->

<input type="radio" name="sex" id="nan"> <label for="nan"><img src="1.jpeg" width="15" height="10"> 男</label>

<input type="radio" name="sex" id="nv"> <label for="nv"><img src="1.jpeg" width="15" height="10"> 女</label>

</td>

</tr>

<tr><!--第二行-->

<td>

生日:

</td>

<td>

<select>

<option>请选择年份</option>

<option>2000</option>

<option>1999</option>

<option>1998</option>

<option>1997</option>

<option>1996</option>

<option>1995</option>

</select>

<select>

<option>请选择月份</option>

<option>12</option>

<option>11</option>

<option>10</option>

<option>9</option>

<option>8</option>

<option>7</option>

</select>

<select>

<option>请选择日期</option>

<option>30</option>

<option>29</option>

<option>28</option>

<option>27</option>

<option>26</option>

<option>25</option>

</select>

</td>

</tr>

</table>

</body>

</html>


这里对应三个select下拉列表元素，生日的年、月和日


今天先到这里，大家晚安~

习大纲

一、事件对象【★】

1、概述

用于存储事件的信息

 说明

 事件对象是由用户产生的（鼠标单击或者按一下键盘）

 事件对象存储 对应 事件信息

 事件对象存储信息有：

事件的类别，如：click，keydown等等

点击事件的位置

点击的哪一个键

等等

 用于阻止事件流，用于阻止浏览器默认动作；

2、获取事件对象

 ie6、7、8

通过关键词event获取

nodeObj.onclick = function() {
window.event
}

 主流浏览器

通过方法第一个参数获取

nodeObj.onclick = function(evt) {
evt
}

思考：形参为什么不写event系统关键词不要用，一般用evt

 兼容

nodeObj.onclick = function(evt) {
var evt = window.event ? window.event : evt;
}

3、事件对象的作用

1）判断是否回车表单提交


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #div1 {width: 800px; height: 800px; background: red; }
   #div2 {width: 400px; height: 400px; background: blue;}
     #div3 {width: 200px; height: 200px; background: green; }
 </style>
</head>
<body>
 <form action="提交给老范.html" id="form1">
   <input type="text" name="">
   <input type="submit" value="提交">
 </form>
<script>
window.onkeydown = function(evt) {
 var evt = window.event ? window.event : evt;
 // console.log(evt);
 // 当表单按下回车键则提交
 if (evt.keyCode == 13) {
   var form1Obj = document.getElementById('form1');
   form1Obj.submit();
 }
}
</script>
</body>
</html>

说明：完善表单提交瑕疵，当获取焦点的时候可以按回车键直接提交，但是没有获取焦点就通过js触发提交（but 必须判断只能是回车键才可以提交）

2）阻止浏览器默认动作

 说明

DOM1级事件 return false；

DOM1级事件或者DOM2级事件 evt.preventDefault();

 案例

阻止用户提交表单

3）事件对象中记录的鼠标位置

 说明

evt.screenX 相对于屏幕的左上角为原点

evt.screenY

evt.clientX 相对于浏览器的客户端左上角为原点（不计算滚动条位置）

evt.clientY

evt.pageX 相对于浏览器的客户端左上角为原点（计算滚动条的位置）

evt.pageY

evt.offsetX 以自己的左上角为原点

evt.offsetY

 图解

 案例

点击增加水果

<script>
document.body.style.backgroundImage="url('ft/bj.jpg')";
   document.body.style.backgroundSize='1366px 768px';
   document.onclick=function(evt){
        imgobg = document.createElement('img');
       i = parseInt(10*Math.random());
       imgobg.setAttribute('src','ft/sg/'+i+'.png');
       imgobg.style.width="100px";
       //随机显示位置
       imgobg.style.position = 'absolute';
       imgobg.style.top = evt.clientY + 'px';
       imgobg.style.left = evt.clientX + 'px';
       document.body.appendChild(imgobg);
   }
   </script>

4）阻止事件流

 说明：

 ie6、7、8：event.cancelBubble=true;

 主流浏览器：evt.stopPropagation();

面向对象OOP

一、概念

在面向对象编程中，类（class）是对象（object）的模板，定义一组对象公有的属性和方法（类是抽象的，对象具体的）

 在PHP中，可以通过实例化一个类来获取对象

 而在JavaScript中没有“类”，但是可以用过另一种方法定义自定义“类”，然后创建

对象，也可以直接创建对象（对象可以有默认成员，也可以后期动态添加成员）

总结：在js里可以通过多种方式创建对象

二、JavaScript中“类”的种类

1、系统类

1）Array类

var arr = new Array();

var arr2 = new Array();

属性

对象.length 获取数组的长度

方法

对象.pop() 弹出数组的最后一个元素，并返回弹出的值

对象.push(n); 给数组添加一个元素，并返回新数组的长度

等等

2）Date类

3）Math类

4）String类

2、自定义类 （构造函数）

1）概念

 明确：类（class）是对象（object）的模板，然后“对象”根据这个模板生成。

 说明1：JS语言中使用构造函数（constructor）作为对象的模板。所谓构造函数，

就是提供一个生成对象的模板，并描述对象的基本结构的函数。

 说明2：一个构造函数，可以生成多个对象，每个对象都有相同的结构。

2）定义构造函数

fucntion 函数名（） {

}

经验总结：构造函数一般情况下函数名首字母大写

︴思考： 思考如果通过构造函数创建对象

通过new关键词+函数名（）即可创建对象

三、通过构造函数创建对象

1、 通过构造函数创建对象

 代码

说明：函数名不区分大小写，但是强烈推荐大写

︴思考： 构造函数和普通函数有什么区别？

答：没有区别，如果直接调用则是普通函数，如果是new+函数名()则构造函数，用于创建对象

脚下留心：不要声明构造函数，当普通函数使用（所以为了明确后期构造函数就使用new实例化，普通函数就直接调用则通过函数名首字母来区分是构造函数还是普通函数）

︴练习： 描述一个人的信息

 提出问题

如何将php面向对象代码（code）转换为 js面向对象代码（code）

 分析步骤

 定义Person构造函数

 丰富Person构造函数成员（属性和方法）

 创建对象

 解决问题

<script>
   //定义构造函数
   function Preson(){
   
       //使用this定义名称属性
       this.name='郭美美';
       //使用this定义年龄属性
       this.age = 28;
       console.log(type);
       
   }
   //2.创建对象
   peObj = new Preson();
 
   console.log(peObj);
   
</script>

︴思考：如果给构造函数传递参数

答：仿普通方法传参


︴思考： js中this含义，如何使用？

1）BOM中，代表window对象

证明


2）在事件中，代表元素/节点对象

证明.

3）在函数/方法里边 代表调用该函数/方法的当前对象

证明.

4）在面向对象封装概念中【★】

 通过this来声明类的公有属性

 通过var来声明类的私有属性

证明.



四、构造函数成员管理

1、成员属性

var 变量名 = 值; //添加私有成员

this.变量名 = 值; //添加公有成员

2、成员方法

var 方法名 = function() {} //添加私有方法成员

this.方法名 = function() {} //添加公有方法成员

︴练习

定义人构造函数，设置姓名属性和eat方法 并 创建对象输出和调用


︴思考： 如果是上述代码是name是私有属性，外面如何输出

答：明确，外面不能直接输出

解决：通过内部方法调用私有属性


︴思考： 如果给对象添加属性和方法？是否会影响构造函数？

答：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
<script type="text/javascript">
//定义人构造函数，设置姓名属性和eat方法 并 创建对象输出和调用
function Person() {
 //定义姓名属性
 this.name = '张三';
 this.getName = function() {
   console.log(name);
 }
 //定义eat方法
 this.eat = function() {
   alert('吃饭日语');
 }
}
//创建对象
var obj = new Person();
console.log(obj);
//输出obj对象里的name属性
console.log(obj.name); //张三
//修改obj的name属性
obj.name = '赵四';
console.log(obj.name);
//创建对象2
var obj1 = new Person();
console.log(obj1.name);
</script>
</body>
</html>

︴练习1：删除对象属性

语法：delete 对象.属性


︴练习2：遍历对象成员

1）语法

for (变量名 in 对象) {


}

脚下留心：变量名指的是对象的键

2）使用




五、 获取构造器（constructor）

1、说明：

通过指定构造函数创建对象，那么我们称该对象的 构造函数名称 为构造器

function Fn() {}

var obj = new Fn(); obj对象构造器是：fn

function Fun2() {}

var obj = new Fun2(); obj对象构造器是：Fun2

2、语法

获取对象构造器：对象.constructor

返回对象的类型：typeof 变量名 或者 typeof(变量名)

判断对象是否是指定构造函数的实例：对象 instanceof 构造器

3、练习

果有人说开发Web系统，从来没用到过HTML标签中的表单标签的话，那他或她，肯定不是在逗你玩，而是他们开发的是静态页面。如果是动态内容的话，表单标签是必须用到的，毕竟它们是标签界的杠把子，表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

6.1 登录窗口

细细想来，现在上什么平台，好像都要登录之后，才可以完成相关的业务操作。上电商平台购物，登录之后才可以付款，付款了才有货收；上自媒体平台，只有登录之后，才可以发文章，发视频。既然登录这么常用，那我就HTML实现一下。

<form>标签用于创建供用户输入的HTML表单，它的action属性绑定后端的业务处理方法(URL);method方法可选get或post。

<input>标签规定了用户可以在其中输入数据的输入字段，type指定输入类型，text为文本，password为密码，可指定的类型还有好多种。name属性指定input的名称，而你输入的值，会被赋给value属性。

<button>按钮标签，常用的类型的有提交用户输入内容的submit，有重置清空表单的reset。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录之后更美</title>
</head>
<body>
<form action="login">
    账号：<input type="text" name="account"/><br/>
    密码：<input type="password" name="pwd"/><br/><br/>
    <button type="submit">
        登录
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

输出结果

6.2 个人信息

好多平台，为了给你推荐个性化的需求，会有一个页面让你填写个人信息，内容常常会有你的爱好、性别、生日什么的。如果你不填写，不友好的平台就不给你跳过。如果遇到这种平台，我一般就直接跳过，不再用，毕竟有些信息是个人隐私，比如老陈搞了10多年IT。

radio单选按钮，属性name的值相同时，多选一，否则都可以选择；

checkbox复习框：可以勾选多个。常用在兴趣等多个类型选择中；

select下拉列表框：在多个预设选项中，选择其中一个；

textarea多行输入框：输入的内容较多时，就用它。rows属性指定行数，cols指定列数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>亮出你的美</title>
</head>
<body>
个人信息登记 <br/> <br/>
<form action="infoSubmit">
    姓名：<input type="text" name="name"/><br/>
    性别：<input type="radio" name="gender" value="male"/>男
    <input type="radio" name="gender" value="female"/>女<br/>
    兴趣：<input type="checkbox" name="p" value="p"/>编程
    <input type="checkbox" name="k" value="k"/>看书
    <input type="checkbox" name="c" value="c"/>看电影
    <input type="checkbox" name="l" value="l"/>看美女
    <br/>
    爱好：
    <select name="love">
        <option value="x">下象棋</option>
        <option value="j">下军旗</option>
        <option value="t">下跳棋</option>
        <option value="w">下围棋</option>
    </select>
    <br/><br/>
    <textarea rows="10" cols="35">个人简介</textarea><br/><br/>
    <button type="submit">
        提交
    </button>
    <button type="reset">
        重置
    </button>
</form>
</body>
</html>

输出结果

好了，有关html表单的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##程序员##HTML5##表单##数据#


在线咨询
上一篇：掌握 onmouseover 事件：打造动态 HTML 体验
下一篇：3月浏览器排行榜出炉，Edge排名第4，QQ浏览器排名第8！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 灵宝市 邯郸县 汤阴县 通榆县 友好区 白碱滩区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服