文章目录
- 🍧一、表单概述:
- 🍧二、属性介绍:
- 😺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 >里面,添加其他字段元素时也应该遵循这个方式。