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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 虽千万人吾往矣
返回列表 发新帖
查看: 2050|回复: 0

[学习笔记] 虽千万人吾往矣

[复制链接]
zltzlt
发表于 2020-1-27 16:50:29 | 显示全部楼层 |阅读模式

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

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

x
虽千万人吾往矣


1. label 元素

label 元素不会向用户呈现任何特殊效果，但是它却提高了与用户的交互体验。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>一个简单的表单</title>
  5.     </head>
  6.     <body>
  7.         <form
  8.             action="https://ilovefishc.com/html5/html5/lesson15/test1/welcome.php"
  9.             method="post"
  10.             autocomplete="off"
  11.         >
  12.             <!-- 当用户点击 “姓名” 时，label 元素会自动将光标聚焦到 input 元素上 -->
  13.             <label
  14.                 >姓名：<input type="text" name="name" autofocus/><br /><br
  15.             /></label>
  16.             <label>邮箱：<input type="text" name="email"/><br /><br /></label>
  17.             <button type="submit">提交</button>
  18.         </form>
  19.     </body>
  20. </html>
复制代码


2. fieldset 和 legend 元素

fieldset 元素用于将表单分组，而 legend 元素则用于定义 fieldset 元素的标题。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>fieldset 练习</title>
  5.     </head>
  6.     <body>
  7.         <fieldset>
  8.             <legend>第一组</legend>
  9.             <p>abcdefg</p>
  10.             <p>0123456</p>
  11.             <p>!@#$%^&</p>
  12.             <p>……</p>
  13.         </fieldset><br>
  14.         <fieldset>
  15.             <legend>第二组</legend>
  16.             <p>abcdefg</p>
  17.             <p>0123456</p>
  18.             <p>!@#$%^&</p>
  19.             <p>……</p>
  20.         </fieldset>
  21.     </body>
  22. </html>
复制代码


显示效果：

1.png

3. select 和 option 元素

select 和 option 元素用于定义下拉框。select 元素用于创建下拉框，而 option 元素则用于定义菜单中的选项。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>select 元素练习</title>
  5.     </head>
  6.     <body>
  7.         请选择你的性别：<select>
  8.             <option>男</option>
  9.             <option>女</option>
  10.         </select>
  11.     </body>
  12. </html>
复制代码


显示效果：

20200127_164418.gif

4. optgroup 元素

当 select 里面的选项太多时看上去不美观。这时可以使用 optgroup 对选项进行分组。

例如：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>optgroup 元素练习</title>
  5.     </head>
  6.     <body>
  7.         请选择你的出生年份：
  8.         <select>
  9.             <!-- label 属性用于定义 optgroup 的标题 -->
  10.             <optgroup label="00 后">
  11.                 <option>2000 年</option>
  12.                 <option>2001 年</option>
  13.                 <option>2002 年</option>
  14.                 <option>2003 年</option>
  15.                 <option>……</option>
  16.             </optgroup>
  17.             <optgroup label="95 后">
  18.                 <option>1995 年</option>
  19.                 <option>1996 年</option>
  20.                 <option>1997 年</option>
  21.                 <option>1998 年</option>
  22.                 <option>1999 年</option>
  23.             </optgroup>
  24.             <optgroup label="90 后">
  25.                 <option>1990 年</option>
  26.                 <option>1991 年</option>
  27.                 <option>1992 年</option>
  28.                 <option>1993 年</option>
  29.                 <option>1994 年</option>
  30.             </optgroup>
  31.         </select>
  32.     </body>
  33. </html>
复制代码


显示效果：

1.png

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-4-23 16:27

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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