HTML 表单实战:从创建到验证

news/2024/11/29 4:32:00/
htmledit_views">

HTML表单是用于收集用户输入数据的一种方式,可以用于创建各种类型的表单,例如登录表单、注册表单、调查问卷表单等。本文将详细介绍表单元素的使用,并利用JavaScript实现对表单数据的验证。

HTML表单元素的使用

输入框<input>

&lt;input>元素用于接收用户输入的文本。它有许多不同的类型,用于不同的输入需求。

  1. 文本输入框:
html"><input type="text" name="username" placeholder="请输入用户名" required>

  1. 密码输入框:
html"><input type="password" name="password" placeholder="请输入密码" required>

  1. 单选框:
html"><input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

  1. 复选框:
html"><input type="checkbox" name="hobbies" value="football">足球
<input type="checkbox" name="hobbies" value="basketball">篮球

  1. 文件上传:
html"><input type="file" name="avatar" accept="image/png, image/jpeg">

  1. 隐藏输入:
html"><input type="hidden" name="id" value="123">

文本域<textarea>

&lt;textarea>元素用于多行文本输入。

html"><textarea name="comment" rows="4" cols="50" placeholder="请输入评论内容"></textarea>

下拉菜单<select>

&lt;select>元素用于创建下拉菜单。

html"><select name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option>
</select>

表单数据的验证

必填项验证

可以通过设置required属性来标记必填项。

html"><input type="text" name="username" required>

邮箱格式验证

可以使用正则表达式来验证邮箱格式。

html"><input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

JavaScript实现表单数据验证

可以使用JavaScript来对表单数据进行验证。以下是一个简单的示例:

html"><script>
function validateForm() {var username = document.forms["myForm"]["username"].value;if (username == "") {alert("用户名不能为空");return false;}var password = document.forms["myForm"]["password"].value;if (password == "") {alert("密码不能为空");return false;}var email = document.forms["myForm"]["email"].value;var emailPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;if (!emailPattern.test(email)) {alert("邮箱格式不正确");return false;}
}
</script><form name="myForm" onsubmit="return validateForm()"><!-- 表单元素 --><input type="text" name="username" required><input type="password" name="password" required><input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"><input type="submit" value="提交">
</form>

在上面的示例中,validateForm()函数用于验证表单数据。如果数据不符合要求,会弹出一个警告框并阻止表单提交。

这只是一个简单的示例,实际的表单验证可能需要更复杂的逻辑。你可以根据实际需求来编写验证代码。

希望这些信息对你有所帮助,祝你能够开发出具有基本交互功能的表单页面!


http://www.ppmy.cn/news/1550807.html

相关文章

大语言模型---Llama不同系列的权重参数文件提取;Llama-7B权重文件提取;Llama-8B权重文件提取;主要代码功能解析

文章目录 1. 概要2. Llama-7B权重文件提取3. Llama-8B权重文件提取4. 主要代码功能解析 1. 概要 Llama 系列模型&#xff08;Meta 发布的大语言模型&#xff09;在开源社区广受欢迎&#xff0c;不同版本&#xff08;前文已经介绍过7B和8B的区别&#xff0c;详情请点击链接&…

2024年华为OD机试真题-路灯照明问题-Python-OD统一考试(E卷)

最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释,精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,发现新题及时跟新。 题目描述: 在一条笔直的公…

英语知识网站开发:Spring Boot框架应用

3系统分析 3.1可行性分析 通过对本英语知识应用网站实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本英语知识应用网站采用SSM框架&#xff0c;JAVA作为开发语…

day2全局注册

全局注册代码&#xff1a; //文件核心作用&#xff1a;导入App.vue,基于App.vue创建结构渲染index.htmlimport Vue from vue import App from ./App.vue //编写导入的代码&#xff0c;往代码的顶部编写&#xff08;规范&#xff09; import HmButton from ./components/Hm-But…

探索 Docker 网络:编织容器间的通信纽带

在容器化技术蓬勃发展的今天&#xff0c;Docker 凭借其卓越的特性重塑了软件的开发、部署与运行模式。而 Docker 网络作为整个生态系统中不可或缺的关键部分&#xff0c;犹如一张无形却强大的蜘蛛网&#xff0c;巧妙地编织起容器间的通信纽带&#xff0c;确保各个容器能够在复杂…

在 Linux 系统中根据pid查找软件位置

在 Linux 系统中,如果您知道一个进程的 PID(进程标识符),并且想要找到该进程对应的可执行文件的位置,可以使用以下几种方法: 方法一:使用 ps 命令 ps 命令可以显示进程的详细信息,包括可执行文件的路径。假设您的 PID 是 1234,可以使用以下命令: ps -p 1234 -o co…

vue3.5

响应式属性解构 import { watchEffect } from vueconst { count } defineProps([count])watchEffect(() > {// 每次父组件中的 count 属性变化时都会触发这个日志console.log(count) }) useTemplateRef 获取 dom // MyComposable 封装的方法 获取dom export const useMy…

RabbitMQ学习-Three

RabbitMQ逻辑结构 RabbitMQ是一个消息队列系统&#xff0c;它的逻辑结构与传统的数据库&#xff08;如MySQL&#xff09;有所不同。在RabbitMQ中&#xff0c;主要的概念是“virtual host”&#xff08;虚拟主机&#xff09;和“queue”&#xff08;队列&#xff09;&#xff0…