HTML-09.表单项标签

avatar
作者
筋斗云
阅读量:0

1.表单项标签

        <input>:表单项,通过type属性控制输入形式

        <input>的type属性:text、password、radio、checkbox、file、date、time、datetime-local、email、number、hidden

         submit、reset、button

        <select> 定义下拉列表,<option>定义列表项

        <textarea> 定义文本域

            type取值                                描述                    

            text                            默认值,定义单行的输入字段

            password                        定义密码字段

            radio                           定义单选按钮

            checkbox                        定义复选框

            file                            定义文件上传按钮

            date/time/datetime-local        定义日期/时间/日期时间

            number                          定义数字输入框

            email                           定义邮件输入框

            hidden                          定义隐藏域

            submit/reset/button             定义提交按钮/重置按钮/可点击按钮

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>表格标签</title>     <style>     </style> </head> <body>     <form action="" method="post">         姓名: <input type="text" name="username"> <br><br>         密码: <input type="password" name="password"> <br><br>         性别:<label> <input type="radio" name="gender" value="1"> 男 </label>  <!-- 被label标签包裹的部分通过点击选择内容就可以选到对应的标签 -->             <label> <input type="radio" name="gender" value="2"> 女 </label> <br><br>         爱好: <label> <input type="checkbox" name="hobby" value="1"> Java </label>              <label> <input type="checkbox" name="hobby" value="2"> 篮球 </label>             <label> <input type="checkbox" name="hobby" value="3"> 象棋</label> <br><br>         上传图像: <input type="file" name="image"> <br><br>         生日:<input type="date" name="birthday"> <br><br>         时间: <input type="time" name="time"> <br><br>         日期时间: <input type="datetime-local" name="datetime"> <br><br>         邮箱: <input type="email" name="email"> <br><br>         年龄: <input type="number" name="age"> <br><br>         学历: <select name="degree">                 <option value="">--------请选择--------</option>                 <option value="1">大专</option>                 <option value="2">本科</option>                 <option value="3">硕士</option>                 <option value="4">博士</option>             </select> <br><br>         描述: <textarea name="description" cols="30" rows="10" ></textarea> <br><br>         <!-- 表单常见按钮 -->         <input type="hidden" name="id" value="1">         <input type="button" value="按钮">          <input type="reset" value="重置">         <input type="submit" value="提交"> <br>     </form> </body> </html>

    广告一刻

    为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!