html表单提交等待动画16HTML 表单提交

<form action="/submit_form" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> <label for="email">电子邮箱：</label> <input type="email" id="email" name="email" required> <input type="submit" value="提交"></form>

在这个例子中，表单有两个输入字段：姓名和电子邮箱。
每个输入字段都有一个<label>标签，这不仅有助于用户理解输入的内容，也有助于屏幕阅读器等赞助技能。
<form>标签的action属性定义了数据提交到做事器的URL，method属性定义了提交数据的HTTP方法（常日是post或get）。

输入类型

HTML5供应了多种输入类型，以支持不同的数据格式和设备。

文本输入

<input type="text" name="username" placeholder="请输入用户名" required><input type="password" name="password" required minlength="8"><input type="email" name="email" required placeholder="example@domain.com"><input type="search" name="search" placeholder="搜索...">数值输入

<input type="number" name="age" min="18" max="100" step="1" required><input type="range" name="volume" min="0" max="100" step="1"><input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">日期和韶光输入

<input type="date" name="birthdate" required><input type="time" name="appointmenttime"><input type="datetime-local" name="appointmentdatetime">选择输入

<label><input type="checkbox" name="interest" value="coding"> 编程</label><label><input type="checkbox" name="interest" value="music"> 音乐</label><label><input type="radio" name="gender" value="male" required> 男性</label><label><input type="radio" name="gender" value="female"> 女性</label><select name="country" required> <option value="china">中国</option> <option value="usa">美国</option></select>分外输入

<input type="color" name="favcolor" value="#ff0000"><input type="file" name="resume" accept=".pdf,.docx" multiple>验证方法

HTML5表单供应了内置的验证功能，可以在数据提交到做事器之提高行检讨。

（图片来自网络侵删）

必填字段

<input type="text" name="username" required>正则表达式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="请输入5位数的邮政编码">数值范围

<input type="number" name="age" min="18" max="99">长度限定

<input type="text" name="username" minlength="4" maxlength="8">表单提交

当用户填写完表单并点击提交按钮时，浏览器会自动检讨所有输入字段的有效性。
如果所有字段都知足哀求，表单数据将被发送到做事器。
否则，浏览器会显示缺点信息，并阻挡表单提交。

<input type="submit" value="提交">

可以利用JavaScript来自定义验证或处理提交事宜：

document.querySelector('form').addEventListener('submit', function(event) { // 检讨表单数据 if (!this.checkValidity()) { event.preventDefault(); // 阻挡表单提交 // 自定义缺点处理 } // 可以在这里添加额外的逻辑，比如发送数据到做事器的Ajax要求});完全例子

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单提交并显示JSON</title></head><body><form id="myForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <br> <label for="email">电子邮件：</label> <input type="email" id="email" name="email"> <br> <input type="button" value="提交" onclick="submitForm()"></form><script>// JavaScript函数，处理表单提交function submitForm() { // 获取表单元素 var form = document.getElementById('myForm'); // 创建一个FormData工具 var formData = new FormData(form); // 创建一个空工具来存储表单数据 var formObject = {}; // 将FormData转换为普通工具 formData.forEach(function(value, key){ formObject[key] = value; }); // 将工具转换为JSON字符串 var jsonString = JSON.stringify(formObject); // 弹出包含JSON字符串的对话框 alert(jsonString); // 阻挡表单的默认提交行为 return false;}</script></body></html>

在这个例子中：

我们定义了一个包含姓名和电子邮件输入字段的表单，以及一个按钮，当点击按钮时会调用submitForm函数。
在submitForm函数中，我们首先获取表单元素并创建一个FormData工具。
然后，我们遍历FormData工具，将表单数据复制到一个普通的JavaScript工具formObject中。
接着，我们利用JSON.stringify方法将formObject转换成JSON字符串。
末了，我们利用alert函数弹出一个包含JSON字符串的对话框。

把稳，这个例子中我们利用了type="button"而不是type="submit"，由于我们不肯望表单有默认的提交行为。
我们的JavaScript函数submitForm会处理所有的逻辑，并且通过返回false来阻挡默认的表单提交。
如果你想要利用type="submit"，你须要在<form>标签上添加一个onsubmit="return submitForm()"属性来代替按钮上的onclick事宜。

结论

HTML5的表单功能为开拓者供应了强大的工具，以便创建功能丰富、用户友好且安全的网站。
通过利用HTML5的输入类型和验证方法，可以确保用户输入的数据是有效的，同时提高用户体验。
随着技能的不断进步，HTML5表单和干系API将连续发展，为前端工程师供应更多的可能性。