JS基础-表单元素-新表单元素-js概述

1.表单元素
1.input元素
1.隐藏域和文件选项框
1.隐藏域
<input type="hidden">
要提交给服务器的数据,但是不想展示给用户看可以放在隐藏域中。
2.文件选择框
<input type="file">
注意:
1.method属性的值必须为post
2.enctype属性的值必须为multipart/form-data
2.textarea元素
1.作用
允许输入多行数据的文本框。
2.语法
标记:<textarea></textarea>
属性:
name:定义控件名称,提供服务器使用
readonly:只读,无值的属性
cols:指定文本域的列数,即一行能显示多少英文字符(中文字符减半)
rows:指定文本域的行数,即默认显示多少行数据,超出rows的话会出现滚动条。
3.select元素
1.语法
1.<select></select>
作用:在页面中表示一个选项框
2.<option></option>
作用:表示选项
2.属性
1.select属性
1.name 定义选项框的名称
2.size 定义默认显示选项的数量,默认值为1
3.multiple 设置多选,无值属性
只有滚动列表支持多选。
2.option属性
1.value 定义选项的值
2.selected 设置默认选中项,无值属性
4.其它元素
1.label元素
作用:关联表单控件的文本
标记:<label></label>
属性:for
设置要与该元素关联的表单控件的id值
2.为控件分组
<fieldset></fieldset> 为控件分组
<legend></legend> 为分组指定标题
3.浮动框架
作用:允许在一个网页中,再引入其他的网页
语法:<iframe></iframe>
属性:
1.src 要引入的网页路径(url)
2.frameborder 浮动框架的边框,默认值1
3.width 宽度
4.height 高度
练习:
新建footer.html网页,在网页中写上版权说明,在index.html网页中通过iframe引入footer.html。
2.新表单元素
1.什么是新表单元素
在HTML5版本中新提出来的控件。
2.详解
1.电子邮件类型
<input type="email">
作用:表单在提交时,会验证数据是否符合email的规范(@)
2.搜索类型
<input type="search">
作用:提供了快速清除功能
3.url类型
<input type="url">
作用:提交时,验证数据是否符合url的规范(绝对路径的规范)
4.电话号码类型
<input type="tel">
作用:在移动端设置中,显示“拨号键盘”
5.数字类型
<input type="number">
作用:只能接收数字,并可以灵活调整数字的值
属性:
value:控制的值
min:能够接收的最小值
max:能够接收的最大值
step:每次调整数字时的变化范围
6.范围类型
<input type="range">
作用:提供一个滑块组件,允许用户选取指定范围的值。
属性:
value:控制的值,默认值。
min:能够接收的最小值
max:能够接收的最大值
step:范围的步长
7.颜色类型
<input type="color">
作用:提供一个颜色拾取控件
8.日期类型
<input type="date">
作用:提供一个日期选择控件
9.周类型
<input type="week">
10.月份类型
<input type="month">

3.JavaScript概述
1.什么是javascript?
JavaScript,简称js,是一种运行于js解释器/引擎中脚本语言。
运行环境:
1.独立安装的js解释器(node)
2.嵌入在浏览器内核中的js解释器
2.js的发展史
1.1992年Nombas公司为自己的软件开发了一款脚本语言ScriptEase,可以运行在浏览器中。
2.1995年网景开发了另一款脚本语言LiveScript,后期更名为JavaScript
3.1996年Microsoft在IE3.0版本克隆版本JSscript
4.1997年提交给ECMA(欧洲计算机制造商联合会),定义了ECMAScript(ES5,ES6)
3.JS的组成
由以下三部分组成:
1.核心 (ECMAScript)
2.DOM(Document Object Model)
文档对象模型
提供了一组允许操作页面元素的函数和属性。
3.BOM(Browser Object Model)
浏览器对象模型
提供了一组允许操作浏览器的函数和属性。
4.js的特点
1.语法类似于c,java
2.无需编译,由js解释器直接运行
3.弱类型语言
4.面向对象的
4.JavaScript的基础语法
1.使用js
1.运行环境搭建
1.独立安装js解释器(node)
1.在命令行界面输入node 按回车键
2.输入console.log("打印输出的内容");
2.使用浏览器内核嵌入js的解释器
浏览器内核负责内容的渲染由两部分组成:
1.内容排版引擎-解析HTML和CSS
2.脚本解释引擎-解析javascript
1.直接在浏览器中输入js脚本
console.log();
2.将JS脚本嵌入在HTML页面中执行
1.HTML的元素的事件执行js脚本
事件:onclick-鼠标单击时要执行的操作
ex:
<input type="button" value="你点我试试?" onclick="console.log(‘点你咋地?!‘)">
2.在<script>标记中编写脚本并执行
网页的任意位置处,嵌入一对<script></script>标记,
在<script>中编写js代码。
js的输出方式:
控制台输出:console.log();
弹出框输出:alert();
网页中输出:document.write();

3.使用外部脚本文件(.js为后缀)
1.创建脚本文件
2.在文件中编写js脚本
3.在使用的网页中引入
<script src="js文件的路径">
//引入外部的js文件后,这对scirpt标记中不能再写js脚本
</script>

原文地址:https://www.cnblogs.com/QiliPING9/p/9027850.html

时间: 2024-10-13 11:12:30

JS基础-表单元素-新表单元素-js概述的相关文章

linux MySQL 如何复制表数据或表结构到新表中

经常操作xshell 发现,复制同样的功能,需要复制数据表的结构和数据,linux MySQL 如何复制表数据或表结构到新表中? 1.MySQL复制表结构及数据到新表的方法 CREATE TABLE new_table SELECT * FROM old_table; 2,只复制表结构到新表 CREATE TABLE new_table like old_table; 注意:还一种方法,但是不复制列属性和索引 CREATE TABLE new_table SELECT * FROM old_ta

SQL Server复制表结构和表数据生成新表的语句

参考:http://topic.csdn.net/t/20020621/09/820025.html SELECT   *   INTO   newTableName   FROM   oldTableName 此方法将把旧表的结构和数据同时copy生成新表,不过主键外键约束没有生成,需要手动设置.

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

MySql中,复制旧表结构到新表

# 创建学生表 create table student(age int,name varchar(32))engine myisam charset utf8;insert into student values(18,'小白'); # 创建教师表,结构与学生表结构一模一样create table teacher like student; # 把学生表的数据写进教师表中insert into teacher select * from student; # 创建家长表,结构与数据与学生表一模

JS基础知识——获取未设置行内元素的样式,定时器

一.getComputedStyle(document.getElementById("div1").width)在IE6,7,8下不兼容: document.getElementById("div1").currentStyle.width 在标准浏览器下不兼容 解决办法:属性判断 用上面两个方法,应注意以下问题: 获取到的是计算机(浏览器)计算后的样式 background: url() red …… 复合样式(不要获取) backgroundColor 单一样

MySQL数据库:SQL语句基础、库操作、表操作、数据类型、约束条件、表之间的关系

数据库相关概念: 1. 数据库服务器:运行数据库管理软件的计算机 2. 数据库管理软件:MySQL.Oracle.db2.slqserver 3. 库:文件夹,用来组织文件/表 4. 表:文件(类似于excel),用来存放多行内容/多条记录 5. 记录:事物一系列典型的特征 6. 数据:描述事物特征的符号 MySQL数据库就是一个套接字软件,用来管理其他机器上的数据文件 MySQL介绍: MySQL是一个关系型数据库管理系统:就是一个基于socket编写的C/S架构胡软件 客户端软件 mysql

MySQL创建临时表-旧表建新表

1.创建临时表 临时表是一张表,用来临时保存一些数据 特点: 只对创建该临时表的用户可见: 当会话结束时,MySQL自动删除临时表. 临时表的核心:建表和删表消耗资源极其少 创建临时表的基本格式: CREATE TEMPORARY TABLE  tbl_name(--); ①创建的临时表在当前会话,正常使用 ②断开连接,再重新连接后执行查询,抛出异常: 错误代码: 1146 Table 'db_name.temtbl_name' doesn't exist.//该临时表在会话结束的时候被系统删除

使用INTO子句创建新表

例子 USE StudentManagement GO SELECT Student_No,Student_Name,Student_Sex INTO #StudentTemp FROM Student GO SELECT *FROM #StudentTemp GO INTO子句可以自动创建一个新表并将查询结果集中的记录添加到该表中.新表的列由select子句中的目标列来决定.若新表名称已#开头,如上所示,则声成的新表为临时表,不带#的为永久表. 使用INTO子句创建新表

【线性表2】线性表的顺序实现:顺序表

顺序表简介 特点:使用一组地址连续的存储单元依次存储表中的数据元素,常见的就是使用数组去实现. 表中逻辑相邻的数据元素,在物理内存上也相邻. 顺序表中的任意数据元素都可随机访问,是一种支持随机访问,长度自动动态调整的线性表结构. 优点:访问表中的元素很快,时间复杂度为O(1) 缺点:插入,删除元素需要移动大量的元素,时间复杂度为O(n) . 因此如果我们在编程中需要这样一种线性表数据结构:构造后对元素的访问操作很频繁,而很少进行增,删等元素位置的调整操作,那么就可以考虑使用顺序表. 代码实现 #