web头歌给表单元素添加说明

Yang enjoy

已于 2023-12-16 12:16:40 修改

阅读量483

点赞数 7

文章标签：前端开发语言

于 2023-12-16 12:16:19 首次发布

本文链接：https://blog.csdn.net/m0_74243656/article/details/135024320

版权

一、Label标签相关概念

二、给表单组件添加说明——单选框

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

三、给表单组件添加说明——多选框

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>为表单的复选控件添加说明</title>
 </head>
 <body>  
  <form>
   你喜欢的运动是？<br/>
   <!-- ********* Begin ******* -->
    <input  type="checkbox" name="Sports" value="sport1" checked>打篮球
    <input type="checkbox" name="Sports" value="sport2" id="sport2">
    <label for="sport2">打排球</label>
    <label><input type="checkbox" name="Sports" value="sport3" >踢足球</label>
    <input type="checkbox" name="Sports" value="sport4" >其它 

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

四、给表单组件添加说明——文本框和文本域

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

  </form>
 </body>
</html>