HTML第三讲-表单

姜九二

2020-7-21

HTML

HTML第三讲-表单

培训信息
+ 培训人：风不习 fbx2020@163.com
+ 培训时间：2020-07-21 21:00 至 2020-07-21 22:00
+ 培训内容：HTML表单

第三章：HTML表单

3.1 表单概述

表单的含义

表单就是用户通过网页向服务器传递数据的媒介
Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息
表单主要分为表单标签及表单控件两大类
表单控件又可细分为表单域和按钮两部分，常见的表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理

常见的服务器编程语言及数据库搭配

Apache ： PHP + MySQL
Tomcat：Java + Oracle
IIS：C# + Sql Server
Node.js：JavaScript + MySQL

3.2 表单标签

表单标签

也是一个HTML元素，它可以包含一些表单元素（输入框、按钮、单选等），也可以包含其他HTML标签
一个页面可以包含多个表单标签，这些标签是相互独立的，不能嵌套
用户向数据库发送数据时，一次只能提交一个表单，如果想要多个表单一起提交，需要用到JS脚本
标签标签：< from > < /form >

表单标签的属性

action：用于设置后台处理程序的地址（必须）
method：用于设置表单提交的方式，常见的有：POST、GET
id：用于设置表单的ID
name：用于设置表单的名称
enctype：设置表单数据内容的类型，application/x-www-form-urlencoded、text/plain、multipart/form-data（用于文件上传时的表单设置）

    <form action="demo.php" method="GET"></form>

3.3 表单域

什么是表单域

表单域多用于收集网站访问者的信息，一般位于< form ></ form >标签之间
表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素
除多行文本框和列表选择框外，大部分表单域使用< input >标签来创建

表单域的属性（input）

id：用于设置表单域的ID
name：用于设置表单域的名称，此字段是传递给服务器的
type：用于设置input表单域的类型
value：传递给服务器端的值
required：用于设置表单域必填
readonly：设置只读
disabled：设置不可用，提交时不传递给后端

文本框

用于输入文本信息的（单行）
< input type="text" >

    <input type="text" name="" id="">

密码域

用于用户输入密码等不想被明文显示的数据
< input type="password" >

    <input type="password" name="" id="">

单选按钮

在一组数据中只能选择其中一个选项
通过将< input >标签的type属性设为radio方式来创建一个单选按钮选项
通过name属性来对radio就行分组，同一组只能选择一个
checked属性：用于设置radio的选中状态

    <input type="radio" name="" id="">

多选按钮

在一组数据中允许用户选择一项或多项，各项之间并不互斥
通过将< input >标签的type属性设为checkbox方式来创建一个复选框
通过name属性来对checkbox就行分组，同一组只能选择一个
checked属性：用于设置checkbox的选中状态

    <input type="checkbox" name="" id="">

多行文本

用于输入多行信息
经常用在备注、新闻内容等字数比较多的场景

    <textarea name="" id="" cols="30" rows="10"></textarea>

文件选择框

用户通过表单上传文件时，需要使用文件选择框来选择上传文件
通过将< input >标签的type属性设为file方式来创建一个文件选择框
使用时需要给form添加enctype="multipart/form-data"属性

    <input type="file" name="" id="">

隐藏域

在网页之间传递数据时，有些数据不希望用户在页面中看到，可以通过隐藏域来实现
通过将< input >标签的type属性设为hidden方式来创建一个文件选择框

    <input type="hidden" name="" id="">

列表选择框

列表选择框允许用户从列表中选择一项或多项
通过< select >和< option >标签创建
size属性用于指定列表选择框显示的行数
multiple="multiple"属性用于指明当前列表框是否允许按住Ctrl键进行多选，默认只能选择一项
< option >标签的value属性多用于发送给服务器的选项值，弱国为空则传递option显示的文本值

    <select size="1" multiple="multiple" name="" id="">
        <option value="1">语文</option>
        <option value="2">英语</option>
        <option selected="selected" value="3">数学</option>
        <option value="4">历史</option>
    </select>

HTML新增加的表单标签（input）

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

    <input type="hidden" name="" id="">

3.4 按钮控件

什么是按钮控件

单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序
按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过< input >标签或< button >标签来创建按钮

    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
    <button type="button">我是一个按钮</button>

完整标签

    <form action="demo.php" method="GET" enctype="multipart/form-data">
        <p>单行文本</p>
        <input type="text" name="" id="">
        <p>密码域</p>
        <input type="password" name="" id="">
        <p>单选域</p>
        <input checked="checked" type="radio" name="program"" id="">php
        <input type="radio" name="program" id="">jsp
        <input type="radio" name="program" id="">asp
        <input checked="checked" type="radio" name="sex" id="">男
        <input type="radio" name="sex" id="">女
        <p>多选域</p>
        <input type="checkbox" name="program1" id="">PHP
        <input checked="checked" type="checkbox" name="program1" id="">ASP
        <input type="checkbox" name="program1" id="">JSP
        <p>多行文本</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <p>文件选择框</p>
        <input type="file" name="" id="">
        <p>隐藏域</p>
        <input type="hidden" name="" id="">
        <p>列表选择框</p>
        <select size="1" multiple="multiple" name="" id="">
            <option value="1">语文</option>
            <option value="2">英语</option>
            <option selected="selected" value="3">数学</option>
            <option value="4">历史</option>
        </select>
        <p>新增的HTML5 Input标签</p>
        <input type="tel" name="" id="">
        <input type="color" name="" id="">
        <input type="date" name="" id="">
        <input type="time">
        <input type="number">
        <p>按钮标签</p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <button type="button">我是一个按钮</button>
    </form>

3.5 表单的提交方式

GET

用户提交的数据以字符串的形式绑定到网址上传递给服务器
从网址可以看到数据

POST

用户提交的数据存在header里传递给服务器
从网址看不到数据

3.6 表单的例子（以用户登陆为例）

要求

用户输入用户名和密码，如果用户名是“张三”，密码是“123456”，则返回：欢迎您：张三，否则返回：用户名或密码错误

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表单</title>
</head>
<body>
    <form action="demo.php" method="POST" enctype="multipart/form-data">
        <p>用户名</p>
        <input type="text" name="username" id="">
        <p>密码</p>
        <input type="password" name="userpwd" id="">
        <p>提交/重置</p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

后端（php）

<?php
header('Content-type:text/html;charset=utf-8');
$username = $_POST['username'];
$userpwd = $_POST['userpwd'];
if($username == '张三' && $userpwd == '123456'){
    echo '<h2>欢迎您：张三</h2>';
}else{
    echo '<h2>用户名或密码错误</h2>';
}

参考链接：

https://www.w3school.com.cn/html/html_form_input_types.asp

阅读剩余

作者：姜九二

链接：https://www.jiangjianwu.cn/development/htmlcssjavascript/html/352/html%e7%ac%ac%e4%b8%89%e8%ae%b2-%e8%a1%a8%e5%8d%95.html

文章版权归作者所有，未经允许请勿转载。

THE END