Form表单

声明：本文多处直接引用了文末的参考链接中的内容，如有侵权，请联系删除

表单概述

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

表单语法

<form  method="post"（规定如何发送表单数据      常用值：get|post）
 action="result.html">（表示向何处发送表单数据）
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

经验：在实际网页开发中通常采用post方式提交表单数据

form标签属性

属性	说明
accept-charset	规定服务器可处理的表单数据字符集
action	规定提交表单时的URL
autocomplete	规定是否启用表单的自动完成功能，可选值为：on(默认)和off
enctype	规定在发送表单数据之前如何对其进行编码，可选值为：text/plain，multipart/form-data，application/x-www-form-urlencoded(默认)
method	规定用于发送 form-data 的 HTTP 方法，可选值为：post和get(默认)
name	规定表单的名称
novalidate	如果使用该属性，则提交表单时不进行验证，值固定为：novalidate
target	规定在何处打开 action URL，可选值为：_blank，_self(默认)，_parent，_top，framenam

form表单元素属性

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称，如果是多个元素，也可以起到分组的作用
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单元素

文本框-语法

<input type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

密码框-语法

<input  type="password "(密码框) name="pass"(密码框的名称)  size="20"(密码框的长度) />

单选按钮-语法

<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
<input name="gen" type="radio" value="女" />女

复选框-语法

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

列表框-语法

<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>

按钮-语法

使用input的按钮，类型必须为submit，否则起不到提交表单的作用
除使用input(type=submit)按钮之外，还可以在form表单中使用button(type='submit')标签作为按钮，其作用与input(type=submit)作用相同

<input type="reset"(重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>

//图片按钮
 
<input type="image" src="images/login.gif"/(图片路径)>

多行文本域-语法

<textarea(多行文本域) name="showText" cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea>

文件域-语法

<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
  <p><input type="file"(文件域) name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

邮箱-语法

<p>邮箱:<input type="email"(邮箱) name="email"/></p>
<input type="submit"/>

注意：会自动验证Email地址格式是否正确。

网址-语法

<p>请输入你的网址:<input type="url"(网址) name="userUrl"/></p>
<input type="submit"/>

注意：会自动验证URL地址格式是否正确。

数字-语法

<p>请输入数字:<input type="number"(数字) name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>

滑块-语法

<p>请输入数字:<input type="range"(滑块) name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>

搜索框-语法

<p>请输入搜索的关键词:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>

表单的高级应用

隐藏域-语法

<input type="hidden"(隐藏域) value="666" name="userid">

只读和禁用-语法

<input name="name" type="text" value="张三" readonly(只读文本框)>
<input type="submit" disabled(禁用) value="保存" >

表单元素的标注

增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

语法

<label for="id"(表单元素的id)>标注的文本</label>
<input type="radio" name="gender" id="male(表单元素id)"/>

表单的初级验证

表单验证的好处

减轻服务器的压力
保证数据的可行性和安全性

表单初级验证的方法

placeholder

input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型

语法：

<input type="search" name="sousuo" placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>

required

规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

语法：

<input type="text" name="username" required(必填项)/>

pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
语法：

<input type="text" name="tel" required pattern(验证规则，正则表达式)="^1[358]\d{9}" />

表达的提交与重置

form表单的提交与重置可以通过HTML自带的表单按钮方式，或者使用JavaScript脚本的方式。

使用表单按钮

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

使用JavaScript脚本

使用JavaScript脚本提交form表单

//提交表单
myForm.method = 'POST';
myForm.action = "action.html";
myForm.submit();

使用JavaScript脚本重置form表单

//重置表单
document.getElementsByName("myForm")[0].reset();

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript脚本实现form表单的提交与重置</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
    <form name="myForm">
        <table align="center">
            <caption>用户注册</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 pan_junbiao的博客</label>
                </td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td>
                     <label>https://blog.csdn.net/pan_junbiao</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                   <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td colspan="2" style="text-align: center; padding: 5px;">
                    <input type="button" value="提交" onclick="submitFrom()"/>
                    <input type="button" value="重置" onclick="resetFrom()"/>
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //提交
    function submitFrom() {
        //验证数据
        if(!myForm.loginName.value) {
            alert("请输入登录账户！");
            myForm.loginName.focus();
            return;
        }
        if(!myForm.loginPwd.value) {
            alert("请输入登录密码！");
            myForm.loginPwd.focus();
            return;
        }
        //提交表单
        myForm.method = 'POST';
        myForm.action = "action.html";
        myForm.submit();
    }
 
    //重置
    function resetFrom() {
        //重置表单
        document.getElementsByName("myForm")[0].reset();
    }
</script>
</html>

注意：使用JavaScript脚本实现form表单的提交与重置时，按钮是普通按钮：type="button"。

form表单提交前自定义数据校验

当我们在提交form表单前，需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。

方式一：使用form表单的 onsubmit 提交事件。

注意：

登录按钮的类型必须是：type="submit"
提交方法是写在form元素的 onsubmit 提交事件上，注意方法的命名不能使用submit，否则会导致事件不会触发
由于方法内部的return false无法传递到form表单中，导致不能阻止表单的提交，所以在onsubmit中必须加上 return

<form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
</form>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
<div align="center">
    <form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
        <table>
            <caption>请输入登录信息</caption>
            <tr>
                <td>博客信息：</td>
                <td>
                    <label>您好，欢迎访问 pan_junbiao的博客</label>
                </td>
            </tr>
            <tr>
                <td>博客地址：</td>
                <td>
                    <label>https://blog.csdn.net/pan_junbiao</label>
                </td>
            </tr>
            <tr>
                <td>登录账户：</td>
                <td>
                    <input type="text" name="loginName" />
                </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td>
                    <input type="password" name="loginPwd" />
                </td>
            </tr>
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td>
                    <input type="submit" value="登录"/>
                </td>
                <td>
                    <input type="reset" value="取消"/>
                </td>
            </tr>
        </table>
        <span id="tips" style="color: red; font-weight: bold"></span>
    </form>
</div>
</body>
<script>
    //提交登录
    function SubmitLogin() {
        let tips = document.getElementById("tips");
        //判断用户名是否为空
        if (!myForm.loginName.value) {
            tips.innerText = "请输入登录账户！"
            myForm.loginName.focus();
            return false;
        }
        //判断密码是否为空
        if (!myForm.loginPwd.value) {
            tips.innerText = "请输入登录密码！"
            myForm.loginPwd.focus();
            return false;
        }
        //校验成功
        return true;
    }
</script>
</html>

方式二：使用普通按钮的 onclick 点击事件

注意：

登录按钮的类型必须是：type="button"
提交方法是写在按钮的 onclick 点击事件上