html基础 表单相关属性综合实战案例 附有注释

html结构代码:
      <form >                     <!-- form 为了让重置按钮生效-->
            <h1>青春不常在,抓紧谈恋爱</h1>
            <hr>
            昵称: <input type="text" placeholder="请输入昵称"> <br><br>
               
            性别:  <input type="radio" name='sex' checked id='man'>
                   <label for="man">男</label>    <!--点击文字选择此项-->

                   <input type="radio" name='sex' id='woman'>
                   <label for="woman">女</label>  
                   
                   <br><br>
   

            <!-- 生日:  -->
            生日:  <input type="date" > <br><br>
            城市:  <select >
                    <option >北京</option>
                    <option selected>上海</option>
                    <option >广州</option>
                    <option >深圳</option>
                </select>
            <br><br> <!--br换行-->
                                  
            婚姻状况: <input type="radio" name="abc" checked id='marry'>
                     <label for="marry">未婚</label>

                     <input type="radio" name="abc" id='married'>
                     <label for="married">已婚</label>
 
                     <input type="radio" name="abc" id='secrecy'>
                     <label for="secrecy">保密</label>
                      <br><br>

            兴趣爱好: <input type="checkbox" checked id='aw'>
                     <label for="aw">抽烟</label>
                     
                     <input type="checkbox" checked id='ax'>
                     <label for="ax">喝酒</label>

                     <input type="checkbox" id='ae'> 
                     <label for="ae">烫头</label>
                     <br><br>

            个人介绍: <br><br>
            <textarea  cols="30" rows="10"></textarea>      <!--textatea 区域文本框-->
            <h2>我承诺</h2> 
            <ul>                           <!--无序类别的应用-->
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚选择另一半</li>
            </ul> <br>
            <input type="checkbox">我同意所有条款 <br>
            <input type="submit" value="免费注册">
            <input type="reset" >
    </form>

 

posted @ 2021-12-31 16:39  嘉琦  阅读(128)  评论(0)    收藏  举报