首页 前端知识 HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)

HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)

2024-04-07 08:04:33 前端知识 前端哥 984 720 我要收藏

文章目录

  • 🍧一、表单概述:
  • 🍧二、属性介绍:
    • 😺1、readonly:只读
    • 😸2、disabled:禁用
    • 😹3、hidden:隐藏域
    • 😻4、placeholder:输入提示
    • 😼5、required:必填
  • 🍧三、文章总结:

🍧一、表单概述:

HTML表单的高级应用可以通过验证、文件上传、自动填充、自定义样式与布局以及交互动态等方式,提供更灵活、更强大的用户输入和交互功能。这些功能可以增强用户体验,提高数据的准确性和安全性。

🍧二、属性介绍:

😺1、readonly:只读

只读字段是一种不可编辑的表单元素,它允许用户查看但不能修改字段的值。只读字段常用于显示一些系统生成的数据,如当前日期、用户名等。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>姓名:<input type="text" value="张三" readonly></p>
<p>密码:<input type="password"></p>
</body>
</html>

运行结果:

在这里插入图片描述

加上readonly后就不能修改了!!!

😸2、disabled:禁用

禁用字段是一种被禁用的表单元素,它不仅不可编辑,还不会被提交到服务器。禁用字段通常用于在某些条件下临时禁用表单元素,如选择了某个选项后禁用相关的输入框。

代码演示:

<p>姓名:<input type="text" value="张三" readonly></p>
<p>密码:<input type="password"></p>
<p><input type="radio" name="sex" checked disabled><input type="radio" name="sex" ></p>

运行结果:
在这里插入图片描述

这就给禁用了!!!

😹3、hidden:隐藏域

隐藏域是一种不可见的表单元素,它用于存储一些需要在表单提交时传递给服务器的数据,但不希望用户看到或修改。隐藏域通常用于存储会话ID、用户ID等敏感信息。

代码演示:

<p>姓名:<input type="text" value="张三" readonly></p>
<p>密码:<input type="password" hidden></p>
<p><input type="radio" name="sex" checked disabled><input type="radio" name="sex" ></p>

运行结果:
在这里插入图片描述

这样就把密码框给隐藏了!!!

😻4、placeholder:输入提示

输入提示是在表单元素中显示一段灰色的文本,用于提示用户所需输入的内容。输入提示通常用于描述表单元素的预期输入。

代码演示:

<p>姓名:<input type="text" value="张三" readonly></p>
<p>密码:<input type="password" placeholder="请输入密码"></p>
<p><input type="radio" name="sex" checked disabled><input type="radio" name="sex" ></p>
<p><input type="submit" value="提交"> <input type="reset" value="重置"></p>

运行结果:

在这里插入图片描述

加上placeholder就会有一个提示你输入的东西!!!

😼5、required:必填

必填字段是一种要求用户必须在提交表单前填写的表单元素。如果用户未填写必填字段,表单通常会给出错误提示,阻止表单的提交。

代码演示:

<form>
<p>姓名:<input type="text" value="张三" readonly></p>
<p>密码:<input type="password" required></p>
<p><input type="radio" name="sex" checked disabled><input type="radio" name="sex" ></p>
<p><input type="submit" value="提交"> <input type="reset" value="重置"></p>
</form>

运行结果:
在这里插入图片描述
加入required后就必须要填写,不然就提交不了!!!

🍧三、文章总结:

在HTML表单的高级应用中,我们可以通过CSS来控制标签,避免浪费时间在不常用的标签上。另外,在开发中,应该掌握常用的标签,而不是花费过多时间在不常用的标签上。此外,需要注意< form >标签应该放在< table >里面,添加其他字段元素时也应该遵循这个方式。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4530.html
标签
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!