html5中select语句的作用

html5中select语句的作用,第1张

除非最终检索它们并利用它们来做点事情,否则将记录放入数据库没什么好处。这就是 SELECT 语句的用途,即帮助取出数据。SELECT 大概是 SQL 语言中最常用的语句,而且怎样使用它也最为讲究;用它来选择记录可能相当复杂,可能会涉及许多表中列之间的比较。本节介绍Select语句关于查询的最基本功能。

SELECT 语句的语法如下:

SELECT selection_list 选择哪些列

FROM table_list 从何处选择行

WHERE primary_constraint 行必须满足什么条件

GROUP BY grouping_columns 怎样对结果分组

HAVING secondary_constraint 行必须满足的第二条件

ORDER BY sorting_columns 怎样对结果排序

LIMIT count 结果限定

注意:所有使用的关键词必须精确地以上面的顺序给出。例如,一个HAVING子句必须跟在GROUP BY子句之后和ORDER BY子句之前。

除了词“SELECT”和说明希望检索什么的 column_list 部分外,语法中的每样东西都是可选的。有的数据库还需要 FROM 子句。MySQL 有所不同,它允许对表达式求值而不引用任何表。

查询特定行:

你能从你的表中只选择特定的行。例如,如果你想要验证你对Bowser的出生日期所做的改变,像这样精选Bowser的记录:

mysql>SELECT * FROM pet WHERE name = "Bowser"

其结果为:

+--------+-------+---------+------+------------+------------+

| name | owner | species | sex | birth | death |

+--------+-------+---------+------+------------+------------+

| Bowser | Diane | dog | m| 1990-08-31 | 1995-07-29 |

+--------+-------+---------+------+------------+------------+

你可以对照前一个例子来验证。

进行表达式计算

前面的多数查询通过从表中检索值已经产生了输出结果。MySQL 还允许作为一个公式的结果来计算输出列的值。表达式可以简单也可以复杂。下面的查询求一个简单表达式的值(常量)以及一个涉及几个算术运算符和两个函数调用的较复杂的表达式的值。例如,计算Browser生活的天数:

mysql>SELECT death-birth FROM pet WHERE name="Bowser"

其结果是:

+-------------+

| death-birth |

+-------------+

| 49898 |

+-------------+

由于MySQL允许对表达式求值而不引用任何表。所以也可以这样使用:

mysql>select (2+3*4.5)/2.5

其结果为:

+---------------+

| (2+3*4.5)/2.5 |

+---------------+

| 6.200 |

+---------------+

条件查询

不必每次查询都返回所有的行记录,你能从你的表中只选择特定的行。为此你需要使用WHERE或者HAVING从句。HAVING从句与WHERE从句的区别是,HAVING表达的是第二条件,在与其他从句配合使用,显然不能在WHERE子句中的项目使用HAVING。因此本小节紧介绍WHERE从句的使用,HAVING从句的使用方法类似。另外WHERE从句也可以实现HAVING从句的绝大部分功能。

为了限制 SELECT 语句检索出来的记录集,可使用 WHERE 子句,它给出选择行的条件。可通过查找满足各种条件的列值来选择行。

WHERE 子句中的表达式可使用表1 中的算术运算符、表2 的比较运算符和表3 的逻辑运算符。还可以使用圆括号将一个表达式分成几个部分。可使用常量、表列和函数来完成运算。在本教程的查询中,我们有时使用几个 MySQL 函数,但是 MySQL 的函数远不止这里给出的这些。请参阅附录 一,那里给出了所有MySQL 函数的清单。

例如,如果你想要验证你对Bowser的出生日期所做的改变,像这样精选Bowser的记录:

mysql>SELECT * FROM pet WHERE name = "Bowser"

+--------+-------+---------+------+------------+------------+

| name | owner | species | sex | birth | death |

+--------+-------+---------+------+------------+------------+

| Bowser | Diane | dog | m| 1990-08-31 | 1995-07-29 |

+--------+-------+---------+------+------------+------------+

输出证实出生年份现在正确记录为1990,而不是1909。

字符串比较通常是大小些无关的,因此你可以指定名字为"bowser"、"BOWSER"等等,查询结果将是相同的。

你能在任何列上指定条件,不只是name。例如,如果你想要知道哪个动物在1998以后出生的,测试birth列:

mysql>SELECT * FROM pet WHERE birth >= "1998-1-1"

+----------+-------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+----------+-------+---------+------+------------+-------+

| Chirpy | Gwen | bird| f| 1998-09-11 | NULL |

| Puffball | Diane | hamster | f| 1999-03-30 | NULL |

+----------+-------+---------+------+------------+-------+

你能组合条件,例如,找出雌性的狗:

mysql>SELECT * FROM pet WHERE species = "dog" AND sex = "f"

+-------+--------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+-------+--------+---------+------+------------+-------+

| Buffy | Harold | dog | f| 1989-05-13 | NULL |

+-------+--------+---------+------+------------+-------+

上面的查询使用AND逻辑 *** 作符,也有一个OR *** 作符:

mysql>SELECT * FROM pet WHERE species = "snake" OR species = "bird"

+----------+-------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+----------+-------+---------+------+------------+-------+

| Chirpy | Gwen | bird| f| 1998-09-11 | NULL |

| Whistler | Gwen | bird| NULL | 1997-12-09 | NULL |

| Slim | Benny | snake | m| 1996-04-29 | NULL |

+----------+-------+---------+------+------------+-------+

AND和OR可以混用。如果你这样做,使用括号指明条件应该如何被分组是一个好主意:

mysql>SELECT * FROM pet WHERE (species = "cat" AND sex = "m")

->OR (species = "dog" AND sex = "f")

+-------+--------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+-------+--------+---------+------+------------+-------+

| Claws | Gwen | cat | m| 1994-03-17 | NULL |

| Buffy | Harold | dog | f| 1989-05-13 | NULL |

+-------+--------+---------+------+------------+-------+

查询排序

使用ORDER BY子句对查询返回的结果按一列或多列排序。ORDER BY子句的语法格式为:

ORDER BY column_name [ASC|DESC] [,…]

其中ASC表示升序,为默认值,DESC为降序。ORDER BY不能按text、text和image数据类型进行排 序。另外,可以根据表达式进行排序。

例如,这里是动物生日,按日期排序:

mysql>SELECT name, birth FROM pet ORDER BY birth

+----------+------------+

| name | birth |

+----------+------------+

| Buffy| 1989-05-13 |

| Fang | 1990-08-27 |

| Bowser | 1990-08-31 |

| Fluffy | 1993-02-04 |

| Claws| 1994-03-17 |

| Slim | 1996-04-29 |

| Whistler | 1997-12-09 |

| Chirpy | 1998-09-11 |

| Puffball | 1999-03-30 |

+----------+------------+

为了以逆序排序,增加DESC(下降 )关键字到你正在排序的列名上:

mysql>SELECT name, birth FROM pet ORDER BY birth DESC

+----------+------------+

| name | birth |

+----------+------------+

| Puffball | 1999-03-30 |

| Chirpy | 1998-09-11 |

| Whistler | 1997-12-09 |

| Slim | 1996-04-29 |

| Claws| 1994-03-17 |

| Fluffy | 1993-02-04 |

| Bowser | 1990-08-31 |

| Fang | 1990-08-27 |

| Buffy| 1989-05-13 |

+----------+------------+

你能在多个列上排序。例如,按动物的种类排序,然后按生日,首先是动物种类中最年轻的动物,使用下列查询:

mysql>SELECT name, species, birth FROM pet ORDER BY species, birth DESC

+----------+---------+------------+

| name | species | birth |

+----------+---------+------------+

| Chirpy | bird| 1998-09-11 |

| Whistler | bird| 1997-12-09 |

| Claws| cat | 1994-03-17 |

| Fluffy | cat | 1993-02-04 |

| Bowser | dog | 1990-08-31 |

| Fang | dog | 1990-08-27 |

| Buffy| dog | 1989-05-13 |

| Puffball | hamster | 1999-03-30 |查询分组与行计数

GROUP BY 从句根据所给的列名返回分组的查询结果,可用于查询具有相同值的列。其语法为:

GROUP BY col_name,….

你可以为多个列分组。

例如:

mysql>SELECT * FROM pet GROUP BY species

+----------+--------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+----------+--------+---------+------+------------+-------+

| Chirpy | Gwen | bird| f| 1998-09-11 | NULL |

| Fluffy | Harold | cat | f| 1993-02-04 | NULL |

| Buffy| Harold | dog | f| 1989-05-13 | NULL |

| Puffball | Diane | hamster | f| 1999-03-30 | NULL |

| Slim | Benny | snake | m| 1996-04-29 | NULL |

+----------+--------+---------+------+------------+-------+

由以上结果可以看出:

查询显示结果时,被分组的列如果有重复的值,只返回靠前的记录,并且返回的记录集是排序的。这并不是一个很好的结果。仅仅使用GROUP BY从句并没有什么意义,该从句的真正作用在于与各种组合函数配合,用于行计数。

1、COUNT()函数计数非NULL结果的数目。

你可以这样计算表中记录行的数目:

mysql>select count(*) from pet

+----------+

| count(*) |

+----------+

|9 |

+----------+

计算sex为非空的记录数目:

mysql>select count(sex) from pet

+------------+

| count(sex) |

+------------+

| 8 |

+------------+

现在配合GROUP BY 从句使用。

例如:要知道每个主人有多少宠物

mysql>SELECT owner, COUNT(*) FROM pet GROUP BY owner

+--------+----------+

| owner | COUNT(*) |

+--------+----------+

| Benny |2 |

| Diane |2 |

| Gwen |3 |

| Harold |2 |

+--------+----------+

又如,每种宠物的个数:

mysql>SELECT species,count(*) FROM pet GROUP BY species

+---------+----------+

| species | count(*) |

+---------+----------+

| bird|2 |

| cat |2 |

| dog |3 |

| hamster |1 |

| snake |1 |

+---------+----------+

如果你除了计数还返回一个列的值,那么必须使用GROU BY语句,否则无法计算记录。例如上例,使用GROUP BY对每个owner分组所有记录,没有它,你得到的一切是一条错误消息:

mysql>SELECT owner, COUNT(owner) FROM pet

ERROR 1140 at line 1: Mixing of GROUP columns (MIN(),MAX(),COUNT()...)

with no GROUP columns is illegal if there is no GROUP BY clause

也可以根据多个列分组,例如:

按种类和性别组合的动物数量:

mysql>SELECT species, sex, COUNT(*) FROM pet GROUP BY species, sex

+---------+------+----------+

| species | sex | COUNT(*) |

+---------+------+----------+

| bird| NULL |1 |

| bird| f|1 |

| cat | f|1 |

| cat | m|1 |

| dog | f|1 |

| dog | m|2 |

| hamster | f|1 |

| snake | m|1 |

+---------+------+----------+

| Slim | snake | 1996-04-29 |

+----------+---------+------------+

注意DESC关键词仅适用于紧跟在它之前的列名字(birth);species值仍然以升序被排序。注意,输出首先按照species排序,然后具有相同species的宠物再按照birth降序排列。

查询多个表

查询多个表,FROM子句列出表名,并用逗号分隔,因为查询需要从他们两个拉出信息。

当组合(联结-join)来自多个表的信息时,你需要指定在一个表中的记录怎样能匹配其它表的记录。这很简单,因为它们都有一个name列。查询使用WHERE子句基于name值来匹配2个表中的记录。

因为name列出现在两个表中,当引用列时,你一定要指定哪个表。这通过把表名附在列名前做到。

现在有一个event表:

mysql>select * from event

+----------+------------+----------+-----------------------------+

| name | date | type | remark |

+----------+------------+----------+-----------------------------+

| Fluffy | 1995-05-15 | litter | 4 kittens, 3 female, 1 male |

| Buffy| 1993-06-23 | litter | 5 puppies, 2 female, 3 male |

| Buffy| 1994-06-19 | litter | 3 puppies, 3 female |

| Chirpy | 1999-03-21 | vet | needed beak straightened|

| Slim | 1997-08-03 | vet | broken rib |

| Bowser | 1991-10-12 | kennel | NULL|

| Fang | 1991-10-12 | kennel | NULL|

| Fang | 1998-08-28 | birthday | Gave him a new chew toy |

| Claws| 1998-03-17 | birthday | Gave him a new flea collar |

| Whistler | 1998-12-09 | birthday | First birthday |

+----------+------------+----------+-----------------------------+

同样方法也可用于同一张表中,你不必有2个不同的表来执行一个联结。如果你想要将一个表的记录与同一个表的其他记录进行比较,联结一个表到自身有时是有用的。例如,为了在你的宠物之中繁殖配偶,你可以用pet联结自身来进行相似种类的雄雌配对:

mysql>SELECT p1.name, p1.sex, p2.name, p2.sex, p1.species

->FROM pet AS p1, pet AS p2

->WHERE p1.species = p2.species AND p1.sex = "f" AND p2.sex = "m"

+--------+------+--------+------+---------+

| name | sex | name | sex | species |

+--------+------+--------+------+---------+

| Fluffy | f| Claws | m| cat |

| Buffy | f| Fang | m| dog |

| Buffy | f| Bowser | m| dog |

+--------+------+--------+------+---------+

1.输入型控件

Input type

用途

说明

email

电子邮件地址文本框

url

网页URL文本框

number

数值的输入域

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

range

特定值的范围的数值,以滑动条显示

属性 值 描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value number 规定默认值

Date pickers

日期,时间选择器

仅Opera9+支持,包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎,比如在站点顶部显示的搜索框

与普通文本框用法一样,只不过这样更语文化

color

颜色选择器

仅Opera支持

将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。

E-mail:

date:

range: number: color:

2. 表单新特性和函数

2.1 placeholder

当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。

如:

<p><label for="runnername">Runner:</label>

<input id="runnername"name="runnername" type="text" placeholder="First and last name" />

</p>

Runner:

2.2 autocomplete

其实在IE6中,autocomplete就已经实现,不过现在这一特性终于标准化了,浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用,autocomplete应该用一保护用户敏感数据,避免本地浏览器对它们进行不安全的存储。

类型

作用

on

该字段无需保护,值可以被保存和恢复

off

该字段需要保护,值不可以保存

unspecified

包含<form>的默认设置,如果没有被包含在表单中或没有指定值,则行为表现为on

如:

<form action="" method="get" autocomplete="on">

Name:<input type="text" name="name" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

当用户提交过一次表单后,再次访问,name的输入框会提示你曾输入的值,而email则不会提示。

2.3 autofocus

页面载入时,我们通过autofocus指定某个表单元素获得焦点,但每个页面只允许出现一个autofocus,如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下,使用使用autofocus会惹恼用户。

2.5 list特性和datalist

通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

Webpage:

请在Opera9+或Firefox10+浏览器中查看。

2.6 required

required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:

Name: <input type="text" name="usr_name" required="required" />

2.7 pattern

pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:

Country code: <input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" />

2.8 novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

如:

<form action="demo_form.asp" method="get" novalidate="true">

E-mail: <input type="email" name="user_email" />

<input type="submit" />

</form>

3. 表单验证

表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化,让web应用更快的抛出错误,但它仍不能取代服务器端的验证,重要数据还要要依赖于服务器端的验证,因为前端验证是可以绕过的。

目前任何表单元素都有八种可能的验证约束条件:

名称

用途

用法

valueMissing

确保控件中的值已填写

将required属性设为true,

<input type="text"required="required"/>

typeMismatch

确保控件值与预期类型相匹配

<input type="email"/>

patternMismatch

根据pattern的正则表达式判断输入是否为合法格式

<input type="text" pattern="[0-9]{12}"/>

toolong

避免输入过多字符

设置maxLength,<textarea id="notes" name="notes" maxLength="100"></textarea>

rangeUnderflow

限制数值控件的最小值

设置min,<input type="number" min="0" value="20"/>

rangeOverflow

限制数值控件的最大值

设置max,<input type="number" max="100" value="20"/>

stepMismatch

确保输入值符合min,max,step的设置

设置max min step,<input type="number" min="0" max="100" step="10" value="20"/>

customError

处理应用代码明确设置能计算产生错误

例如验证两次输入的密码是否一致,等会DEMO细说

下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看:

源代码:

<form name="register1" id="register1">

<p><label for="runnername">RunnerName:</label>

<input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/>

</p>

<p><label for="phone">Tel #:</label>

<input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}"

placeholder="xxx-xxxx-xxxx"/></p>

<p><label for="emailaddress">E-mail:</label>

<input id="emailaddress" name="emailaddress" type="email"

placeholder="For confirmation only"/></p>

<p><label for="dob">DOB:</label>

<input id="dob" name="dob" type="date"

placeholder="MM/DD/YYYY"/></p>

<p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>

<p><label for="style">Shirt style:</label>

<input id="style" name="style" type="text" list="stylelist" title="Years of participation"

autocomplete="off"/></p>

<datalist id="stylelist">

<option value="White" label="1st Year"/>

<option value="Gray" label="2nd - 4th Year"/>

<option value="Navy" label="Veteran (5+ Years)"/>

</datalist>

<fieldset>

<legend>Expectations:</legend>

<p>

<label for="confidence">Confidence:</label>

<input id="confidence" name="level" type="range"

onchange="setConfidence(this.value)"

min="0" max="100" step="5" value="0"/>

<span id="confidenceDisplay">0%</span></p>

<p><label for="notes">Notes:</label>

<textarea id="notes" name="notes" maxLength="100"></textarea></p>

</fieldset>

<p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>

</form>

显示搜索按钮需要满足3个条件:

1.input在form标签中

2.form标签设置了action属性值

3.input设置type为search

示例如下:

<form action="#">

    <input type="search" />

</form>

这种情况下点击搜索按钮会跳转到action对应的地址进行搜索

如果我们需要js来处理搜索逻辑,可以设置form不提交,并且监听输入框的keydown事件

示例如下:

<form action="#" onsubmit="return false">

    <input type="search" id="t_search" />

</form>

<script type="text/javascript">

$("#txt_search").keydown(function (e) {

    if (e.keyCode == 13) {

        //搜索处理

    }

})

</script>

还有一个前往按钮,也类似,把type换成text就可以了,所以form很重要,如果我们不放form,就是“换行”按钮了。

end


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7053213.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存