设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 表单的基本功能
返回列表 发新帖
查看: 2340|回复: 0

[学习笔记] 表单的基本功能

[复制链接]
zltzlt
发表于 2020-1-26 18:26:04 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
HTML 表单的基本功能


1. 自动填充

浏览器会 “记住” 表单中的数据。

1.png

可以设置 autocomplete 属性为 off 关闭这个功能：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
  6.     </head>
  7.     <body>
  8.         <form
  9.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  10.             method="post"
  11.             autocomplete="off"
  12.         >
  13.             名字：<input type="text" name="name" /><br /><br />
  14.             邮箱：<input type="text" name="email" /><br /><br />

  16.             <button type="submit">提交</button>
  17.             <button type="reset">重置</button>
  18.         </form>
  19.     </body>
  20. </html>
复制代码


2. 指定目标显示位置

form 元素有一个 target 属性，用于指定目标页以什么方式打开。可以设置为 _blank（在新标签页中打开）：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
  6.     </head>
  7.     <body>
  8.         <form
  9.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  10.             method="post"
  11.             autocomplete="off"
  12.             target="_blank"
  13.         >
  14.             名字：<input type="text" name="name" /><br /><br />
  15.             邮箱：<input type="text" name="email" /><br /><br />

  17.             <button type="submit">提交</button>
  18.             <button type="reset">重置</button>
  19.         </form>
  20.     </body>
  21. </html>
复制代码


3. 设置默认值

可以为 input 元素指定 value 属性设置文本输入框的默认值。例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
  6.     </head>
  7.     <body>
  8.         <form
  9.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  10.             method="post"
  11.             autocomplete="off"
  12.             target="_blank"
  13.         >
  14.             名字：<input type="text" name="name" value="zltzlt" /><br /><br />
  15.             邮箱：<input type="text" name="email" /><br /><br />

  17.             <button type="submit">提交</button>
  18.             <button type="reset">重置</button>
  19.         </form>
  20.     </body>
  21. </html>
复制代码


4. 自动聚焦

可以设置 input 元素的 autofocus 属性，使得一打开页面焦点就聚焦在那个 input 上。例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
  6.     </head>
  7.     <body>
  8.         <form
  9.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  10.             method="post"
  11.             autocomplete="off"
  12.             target="_blank"
  13.         >
  14.             名字：<input
  15.                 type="text"
  16.                 name="name"
  17.                 value="zltzlt"
  18.                 autofocus
  19.             /><br /><br />
  20.             邮箱：<input type="text" name="email" /><br /><br />

  22.             <button type="submit">提交</button>
  23.             <button type="reset">重置</button>
  24.         </form>
  25.     </body>
  26. </html>
复制代码


5. 禁用元素

禁用某个元素可以指定其 disabled 属性。例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
  6.     </head>
  7.     <body>
  8.         <form
  9.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  10.             method="post"
  11.             autocomplete="off"
  12.             target="_blank"
  13.         >
  14.             名字：<input
  15.                 type="text"
  16.                 name="name"
  17.                 value="zltzlt"
  18.                 autofocus
  19.                 disabled
  20.             /><br /><br />
  21.             邮箱：<input type="text" name="email" /><br /><br />

  23.             <button type="submit">提交</button>
  24.             <button type="reset">重置</button>
  25.         </form>
  26.     </body>
  27. </html>
复制代码


这样第一个 input 元素基本废掉了，不能修改，不能选中与拷贝，也不会被提交到服务器上。

我们可以用 readonly（只读）解决这个问题：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
  6.     </head>
  7.     <body>
  8.         <form
  9.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  10.             method="post"
  11.             autocomplete="off"
  12.             target="_blank"
  13.         >
  14.             名字：<input
  15.                 type="text"
  16.                 name="name"
  17.                 value="zltzlt"
  18.                 autofocus
  19.                 readonly
  20.             /><br /><br />
  21.             邮箱：<input type="text" name="email" /><br /><br />

  23.             <button type="submit">提交</button>
  24.             <button type="reset">重置</button>
  25.         </form>
  26.     </body>
  27. </html>
复制代码

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 11:56

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表