一、本课目标

了解表单元素的应用场景
掌握表单元素的语法
掌握常用的表单元素

二、表单语法

image.png

分析：

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

三、表单元素格式

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

image.png

3.1文本框

image.png

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本框</title>
</head>
<body>
    <form method="post" action="">
        <p>
            名字：
            <input type="text" value="" name="fname"/>
        </p>
        <p>
            姓氏：
            <input type="text" value="张" name="text"/>
        </p>
        <p>
            登录名：
            <input name="sname" type="text" size="30"/>
        </p>
    </form>
</body>
</html>

结果如下：

image.png

3.2密码框

image.png

跟文本框的区别在于：
1、type属性的值为password
2、当在浏览器界面输入的时候，不会显示你输入的信息，会用小圆点来代替。

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

3.3单选按钮

image.png

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本框</title>
</head>
<body>
    <form method="post" action="">
       性别：
        <input name="gen" type="radio" class="input" value="男" checked/>男
        <input name="gen1" type="radio" class="input" value="女"/>女
    </form>
</body>
</html>

结果：

image.png

分析：因为在男的那一行加上了checked，所以此时默认为男，但是选择女的时候，男前面的圈里面的点不会消失，并且女前面的圈里面的点不可取消。即两个都可以选中，并且不可以切换。
原因：上面这段代码跟图里面的代码的区别在于name属性的值，在图片中两个属性的值都是gen，而在示例代码中不是这样。
解决方法：将name属性的值设为相同的。
这样解决的原因：我们给后台传送数据的时候考的就死name加上type的值，当name值相同的时候，浏览器提供给后台的数据只能是“name=男”或者“name=女”，这样的数据，而不可能是相同的。
注：当使用单选框或者复选框的时候，系统会默认把name属性相同的分为一个组，然后根据type属性的不同来确定可以选几个。

3.4复选框

image.png

示例代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本框</title>
</head>
<body>
    <form method="post" action="">
       性别：
        <input name="interest" type="checkbox" class="input" value="聊天" checked/>聊天
        <input name="interest" type="checkbox" class="input" value="运动"/>运动
        <input name="interest" type="checkbox" class="input" value="玩游戏"/>玩游戏
    </form>
</body>
</html>

结果如下：

image.png

结果：三个可以任意选中或者去除。
当name值不一样的时候，功能跟上面的代码是一样的，但是它的含义就完全不一样了。当名字不同的时候，代表的是两个完全不同的组的复选框。所以当是一个组的数据的时候，尽量把名字写成一样的。

3.5下拉列表框

image.png

使用select标签，下拉选项用option标签来设置。默认选项用selected。
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本框</title>
</head>
<body>
    <form method="post" action="">
        出生日期：
        <input name="byear" value="2017" size="4" maxlength="4" type="text"/>
        <select name="bmon">
            <option value="">[选择月份]</option>
            <option value="1" selected>一月</option>
            <option value="2">二月</option>
            <option value="3">三月</option>
        </select>
    </form>
</body>
</html>

运行结果：

image.png

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

3.6按钮狂

image.png

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本框</title>
</head>
<body>
    <form method="post" action="">
        <p>
            用户名:
            <input type="text" name="name"/>
        </p>
        <p>
            密码：:
            <input type="password" name="password"/>
        </p>
        <p>
            <input type="reset" name="butReset" value="reset按钮"/>
            <input type="submit" name="butSubmit" value="submit"/>
            <input type="button" name="butButton" value="button"  onclick="alert(this.value)"/>
        </p>
    </form>
</body>
</html>

运行结果如下：

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 type="file" name="files"/>
 <input type="submit" name="upload" value="上传"/>

其中第一个input元素是上传文件，第二个input是上传按钮。
同时当是文件域的时候，需要在form标签里面增加一个这个属性：enctype="multipart/form-data"

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

3.10邮箱

image.png

示例代码：

  <p>
            邮箱：
            <input type="email" name="email"/>
            <input type="submit"/>
        </p>

结果如下：

image.png

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

3.11网址

image.png

示例代码：

 <p>
            网址：
            <input type="url" name="userUrl"/>
            <input type="submit"/>
 </p>

结果如下：

image.png

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

3.12数字

image.png

示例代码如下：

 <p>
            请输入数字：
            <input type="number" name="number" min="0" max="100" step="10"/>
            <input type="submit"/>
        </p>

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

3.13滑块

image.png

示例代码：

<p>
            <input type="range" name="range1" max="10" min="0" step="2"/>
            <input type="submit"/>
        </p>

结果分析：

image.png

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

3.14搜索框

image.png

示例代码：

 <p>
            请输入搜索关键字：
            <input type="search" name="sousuo"/>
            <input type="submit" value="Go"/>
        </p>

结果如下：

image.png

3.14总结

image.png

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

五、表单概述及常用表单元素

五、表单概述及常用表单元素

一、本课目标

二、表单语法

三、表单元素格式

3.1文本框

3.2密码框

3.3单选按钮

3.4复选框

3.5下拉列表框

3.6按钮狂

3.7图片按钮

3.8多行文本域

3.9文件域

3.10邮箱

3.11网址

3.12数字

3.13滑块

3.14搜索框

3.14总结