php简述表单及常用表单元素,五、表单概述及常用表单元素

一、本课目标

了解表单元素的应用场景

掌握表单元素的语法

掌握常用的表单元素

二、表单语法

image.png

分析：

网页总插入一个表单，必须使用form元素，也是一个双标签

里面有两个非常重要的元素：method和action；

method规定用户如何发送数据给服务器，常见有两个值：get和post。根据设置的值不同，其过程完全是不一样的。get会在地址栏上改变地址栏的信息，我们输入到表单的内容会完全显示在地址栏上；而post则不会，地址栏上不会发生任何的改变。所以考虑到用户的安全性来说，更建议post来传输。并且post提供的数据量比get要大。

action表示向何处发送表单数据

三、表单元素格式

分析：input标签以反斜杠结尾，是一个单标签，type是input元素的类型，name是input元素的名字，value是input元素的值。name和value一定要写，因为浏览器向服务器提交的是这两个属性的值的组合。

image.png

3.1文本框

image.png

代码如下：

文本框

名字：

姓氏：

登录名：

结果如下：

image.png

3.2密码框

image.png

跟文本框的区别在于：

1、type属性的值为password

2、当在浏览器界面输入的时候，不会显示你输入的信息，会用小圆点来代替。

除了这两点，其他的使用都是一样的。

3.3单选按钮

image.png

跟前面的区别：除了type的值不一样，其他的跟前面的一样，这里type的值为radio。

示例代码：

文本框

性别：

男

女

结果：

image.png

分析：因为在男的那一行加上了checked，所以此时默认为男，但是选择女的时候，男前面的圈里面的点不会消失，并且女前面的圈里面的点不可取消。即两个都可以选中，并且不可以切换。

原因：上面这段代码跟图里面的代码的区别在于name属性的值，在图片中两个属性的值都是gen，而在示例代码中不是这样。

解决方法：将name属性的值设为相同的。

这样解决的原因：我们给后台传送数据的时候考的就死name加上type的值，当name值相同的时候，浏览器提供给后台的数据只能是“name=男”或者“name=女”，这样的数据，而不可能是相同的。

注：当使用单选框或者复选框的时候，系统会默认把name属性相同的分为一个组，然后根据type属性的不同来确定可以选几个。

3.4复选框

image.png

示例代码如下：

文本框

性别：

聊天

运动

玩游戏

结果如下：

image.png

结果：三个可以任意选中或者去除。

当name值不一样的时候，功能跟上面的代码是一样的，但是它的含义就完全不一样了。当名字不同的时候，代表的是两个完全不同的组的复选框。所以当是一个组的数据的时候，尽量把名字写成一样的。

3.5下拉列表框

image.png

使用select标签，下拉选项用option标签来设置。默认选项用selected。

示例代码：

文本框

出生日期：

[选择月份]

一月

二月

三月

运行结果：

image.png

value属性的值的意义：比如用户选择三月，浏览器提交给服务器的不是三月这个值，而是这个option里面对应的value的值：3.服务器得到的信息是：bmon=3.

3.6按钮狂

image.png

这个地方也只是改变一下type的值而已。当type的值不同的时候，按钮的形式也是不同的：reset指的是充值按钮，submit指的是提交按钮，button指的是普通按钮。但是要注意的是：这个地方的value值指的是按钮上要显示的文字。

示例代码如下：

文本框

用户名:

密码：:

运行结果如下：

image.png

当我选择reset按钮的时候，我输入的东西都直接清空；当我选择提交按钮额时候，网页会提交我填进去的数据；当我选择button按钮的时候，后面有一个onclick属性，这个属性就代表我点击button按钮的时候会显示什么样的信息。button按钮本来就没有什么作用，只有我们认为地给他设定之后，它才会进行我们给它设定的操作。

3.7图片按钮

image.png

图片按钮和button按钮一样没有扫描操作，需要人为的赋予操作。

可以加上value属性赋予默认值，同时配合onclick属性做出好玩的操作。

3.8多行文本域

image.png

使用textarea这个表单元素。

3.9文件域

image.png

使用的也是input元素，只不过type的值是file。

示例代码如下：

其中第一个input元素是上传文件，第二个input是上传按钮。

同时当是文件域的时候，需要在form标签里面增加一个这个属性：enctype="multipart/form-data"

注：上面这段代码在不同的浏览器里面的显示是不一样的，要想让样式变得一样，可以通过以后学习的css样式来操作。

3.10邮箱

image.png

示例代码：

邮箱：

结果如下：

image.png

分析：该元素会自动验证邮箱格式是否正确

3.11网址

image.png

示例代码：

网址：

结果如下：

image.png

这个元素也会自动验证网址格式是否正确。

3.12数字

image.png

示例代码如下：

请输入数字：

结果分析：只能提交10的倍数。

3.13滑块

image.png

示例代码：

结果分析：

image.png

也可以在上面那段代码之中加上一个属性：value，其值为默认值。

3.14搜索框

image.png

示例代码：

请输入搜索关键字：

结果如下：

image.png

3.14总结

image.png

上面的总结少了图像image、文件file、搜索search和普通按钮button。