TYUT头歌HTML实训题答案2

米兔知返

已于 2023-12-13 16:03:39 修改

阅读量1k

点赞数 2

分类专栏： web 文章标签： html 前端

于 2023-12-11 22:44:16 首次发布

本文链接：https://blog.csdn.net/m0_74086486/article/details/134937980

版权

web 专栏收录该内容

2 篇文章 3 订阅

订阅专栏

1.创建下拉列表

第1关：下拉列表控件相关概念

第2关：创建下拉列表

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建下拉列表</title>
 </head>
 <body>
  <form action="" method="get">
   <!-- ********* Begin ******* -->
   <select size="2">
       <option value="yx">玩游戏</option>
       <option value="dy">看电影</option>
       <option value="yy">听音乐</option>
   </select>
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第3关：设置多选和默认选项

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>创建多选和默认选项</title>
 </head>
 <body>
  <form action="" method="get">
   <!-- ********* Begin ******* -->
   <select multiple>
       <option value="m" selected>猫</option>
       <option value="g">狗</option>
       <option value="n">鸟</option>
       <option value="yz">鸭子</option>
   </select>



   <!-- ********* End ********* -->
  </form>
 </body>
</html>

2.对表单元素分组

第1关：分组元素相关的概念

第2关：对表单元素分组

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单分组</title>
 </head>
<body>
    <form>
        <!-- ********* Begin ********* -->
          <fieldset>
              <legend>请选择个人爱好</legend>
              <input type="checkbox" name="hobby">音乐
              <input type="checkbox" name="hobby">体育
              <input type="checkbox" name="hobby">其他
          </fieldset>
          
          	  
          
          
          
        <!-- ********* End ********* -->
    </form>
</body>
</html>

3.给表单组件添加说明

第1关：label标签相关概念

第2关：给表单组件添加说明__单选框（自求多福吧，我也写不出来）

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为表单的单选控件添加说明</title>
 </head>
 <body>  
  <form>
   国庆期间你最喜欢看的电影？<br/>
   <!-- ********* Begin ******* -->
    <input type="radio" name="Film" value="Film1">夺冠
    <input type="radio" name="Film" value="Film2" id="Film2"> <label for="Film2">我和我的祖国</label>
    <label><input type="radio" name="Film" value="Film3">姜子牙</label>

     
     
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第3关：给表单组件添加说明——多选框（自求多福吧，我也写不出来）

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为文本域控件添加说明</title>
 </head>
 <body>  
  <form>
   推荐人：
   <!-- ********* Begin ******* -->
    <input type="text" autofocus></br>
    <label for="reason">推荐理由：</label></br>
    <textarea name="reason" rows="6" cols="60" wrap="hard" required="required" id="reason" >
    </textarea>
    
    
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

第4关：给表单组件添加说明-文本框和文本域

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为文本域控件添加说明</title>
 </head>
 <body>  
  <form>
   推荐人：
   <!-- ********* Begin ******* -->
    <input type="text" autofocus></br>
    <label for="reason">推荐理由：</label></br>
    <textarea name="reason" rows="6" cols="60" wrap="hard" required="required" id="reason" >
    </textarea>
    
    
   <!-- ********* End ********* -->
  </form>
 </body>
</html>

4.对表单进行验证

第1关：表单验证相关的概念

第2关：非空校验

 <html>
  <head>
   <meta charset="utf-8"/>
   <title>设置非空校验</title>
  </head>
  <body>
   <form>
      密码：
   <!-- ********* Begin ******* -->
      <input type="password"  required="required" title="请输入不超过6位的密码！" maxlength="6"/><br/>
   <!-- ********* End ********* -->
       <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第3关：邮箱校验

 <html>
  <head>
   <meta charset="utf-8"/>
   <title>设置邮箱校验</title>
  </head>
  <body>
   <form>
      密码：
     <input type="password"  required="required" title="请输入6位密码！" maxLength="6"/><br/>
     邮箱：
   <!-- ********* Begin ******* -->
     <input type="email"  required="required" placeholder="输入格式：xxx@xxx"/><br/>
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

第4关：pattern验证

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置年龄校验</title>
  </head>
  <body>
   <form>
      密码：
     <input type="password"  required="required" title="请输入6位密码！" maxLength="6"/><br/>
     邮箱：
      <input type="email"  required="required" placeholder="输入格式：xxx@xxx"/><br/>
     年龄：
   <!-- ********* Begin ******* -->
     <input type="text"  required="required" pattern="^[1-9]?[0-9]$"/>
   <!-- ********* End ********* -->
     <br/> <input type="submit"  value="提交"/> 
    </form>
  </body>
 </html>

好了，今天就先跟新到这里了，不喜勿喷。

还有哪位大佬能把那两关闯一下，小编实在是心累的不行啦，可以的话写在评论区吧！