HTML表单和常用属性

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
form表单常用类型 类型 描述 示例 text 文本框 <input type="text"> password 暗文文本框 <input type="password"> email 有验证的邮箱表单 <input type="email"> number 数字文本框，只能输入数字 <input type="number"> date 年月日的数字滚轮 <input type="date"> radio 单选框 <input type="radio"> checkbox 复选框 <input type="checkbox"> image 图形化 submit 按钮 <input type="image">
下拉列表

select元素用来创建下拉列表</select>
<select> 元素中的 <option> 标签定义了列表中的可用选项。
示例

  1.         <div>
  2.         <select>
  3.             <option value="0" required disabled>--请选择--</option>
  4.             <option value="1">唱</option>
  5.             <option value="2">跳</option>
  6.             <option value="3">Rap</option> 
  7.             <option value="4" selected>篮球</option> 
  8.         </select>
  9.         </div>
form表单常用属性 类型 描述 示例 name 控件名称，作为键值对的一部分与表单一同提交 name="password" value 控件的初始值 value="18" max 最大值 max="2023-03-13" min 最小值 min="1997-05-08" maxlength value的最小长度(字符数) maxlength="18" minlength value的最小长度(字符数) minlength="18" size 控件的尺寸 size="18" selected 预先选定该选项。 selected placeholder 出现在控件上的文字 placeholder="请填写用户名" chenked 控件是否选中 chenked required 布尔值。如果存在，这个值是必需的 required disabled 布尔值。表单控件是否禁用 disabled ps

radio单选按钮允许在多个拥有相同 name 值的选项中选中其中一个。

  1.          <div>
  2.           <label for="sex">性别: 
  3.             <input type="radio" name="gender" value="sex" id="sex" />男
  4.             <input type="radio" name="gender" value="sex" id="sex" />女
  5.             <input type="radio" checked name="secrecy" value="sex" id="sex" />保密
  6.           </label>
  7.         </div>

checkbox复选框需要返回多个值，需要在name属性中加[]。

  1.  <!-- 复选框 -->
  2.         <div>
  3.         <label for="hobby">爱好:</label>
  4.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label>
  5.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label>
  6.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label>
  7.           <label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>篮球</label>
  8.         </div>
用户注册表实例
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <form action="0313.php" method="post">
  11.       <fieldset>
  12.         <legend style="text-align: center">用户注册</legend>
  14.         <!-- 文本框 -->
  15.         <div>
  16.           <label for="usname">账户:
  17.             <input type="text" placeholder="不少于6位数" name="usname" id="usname" maxlength="12"/></label>
  18.         </div>
  20.         <!-- 暗文文本框 -->
  21.         <div>
  22.           <label for="password">密码:
  23.             <input type="password" placeholder="输入密码" name="password" id="password" minlength="8"/></label>
  24.         </div>
  26.         <!-- 邮箱表单 -->
  27.         <div>
  28.           <label for="email">邮箱:
  29.             <input type="email" placeholder="注意邮箱格式@" name="email" id="email"/></label>
  30.         </div>
  32.         <!-- 数字 -->
  33.         <div>
  34.             <label for="age">年龄:
  35.                 <input type="number" name="age" id="age" value="18" min="18" max="20">
  36.             </label>
  37.         </div>
  39.         <!-- 日期 -->
  40.         <div>
  41.             <label for="birthday">
  42.                 <input type="date" name="birthday" id="birthday" value="1997-05-08" min="1997-05-08" max="2023-03-13">
  43.             </label>
  44.         </div>
  46.         <!-- 单选框 -->
  47.         <!-- check = "chcked"表示默认选择，应用于单选和复选 -->
  48.         <!-- name需统一才可以单选，唯一选项-->
  49.         <div>
  50.           <label for="sex">性别: 
  51.             <input type="radio" name="gender" value="sex" id="sex" />男
  52.             <input type="radio" name="gender" value="sex" id="sex" />女
  53.             <input type="radio" checked name="secrecy" value="sex" id="sex" />保密
  54.           </label>
  55.         </div>
  57.         <!-- 复选框 -->
  58.         <div>
  59.         <label for="hobby">爱好:</label>
  60.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label>
  61.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label>
  62.           <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label>
  63.           <label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>篮球</label>
  64.         </div>
  66.         <!-- 下拉框 -->
  67.         <div>
  68.         <select>
  69.             <option value="0" required disabled>--请选择--</option>
  70.             <option value="1">唱</option>
  71.             <option value="2">跳</option>
  72.             <option value="3">Rap</option> 
  73.             <option value="4" selected>篮球</option> 
  74.         </select>
  75.         </div>
  77.         <!-- 多行文本框 -->
  78.         <div>
  79.             <label for="">个人简介: 
  80.                 <br>
  81.                 <textarea name="" id="" cols="30" rows="7" placeholder="老师好，我是练习时长两年半的个人练习生ikun。喜欢唱、跳、rap、篮球。"></textarea>
  82.             </label>
  83.         </div>
  85.         <!-- 图片 -->
  86.         <div>
  87.             <label for="picture">
  88.                 <input type="image" src="./0313image/1.png" alt="同意" width="220px" id="picture" onclick="alert('密码输入正确')">
  89.             </label>
  90.         </div>
  92.         <div>
  93.             <button>提交</button>
  94.             <input type="reset" value="重置">
  95.         </div>
  99.       </fieldset>
  100.     </form>
  101.   </body>
  102. </html>
【感谢龙石为本站提供数据底座技术支撑http://www.longshidata.com/pages/government.html】
更多阅读