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

文章目录

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

一、表单概述:

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

二、属性介绍:

1、readonly:只读

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

运行结果:

HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)_第1张图片

加上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>

运行结果:
HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)_第2张图片

这就给禁用了!!!

3、hidden:隐藏域

<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>

运行结果:
HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)_第3张图片

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

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>

运行结果:

HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)_第4张图片

加上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>

运行结果:
HTML_表单的高级应用(隐藏域、只读、禁用、输入提示、必填)_第5张图片
加入required后就必须要填写,不然就提交不了!!!

三、文章总结:

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

你可能感兴趣的:(html)