文章目录
🍧一、表单概述：
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 >里面，添加其他字段元素时也应该遵循这个方式。
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
