HTML学习笔记7: form表单项

表单项

---

• input     定义表单项,通过type属性控制输入形式

• select 定义下拉列表

• textarea 定义文本域

---

input

---

text 文本框

姓名: <input type="text" name="name"> <br><br>

---

password 密码框

密码: <input type="password" name="password"> <br><br>

---

radio 单选按钮

label标签的作用: 点击对应的文字按钮也会被选中, 不需要精确地点击选项按钮

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

性别:  <input type="radio" name="gender" value="1" id="male">
      <label for="male">男</label>
      <input type="radio" name="gender" value="2" id="female"> 
      <label for="female">女</label> <br><br>

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在

性别: <label><input type="radio" name="gender" value="1">男</label>
      <label><input type="radio" name="gender" value="2">女</label> <br><br>

默认选中 checked

性别: <label><input type="radio" name="gender" value="1">男</label>
      <label><input type="radio" name="gender" value="2" checked>女</label> <br><br>

---

checkbox 复选框

爱好: <label><input type="checkbox" name="hobby" value="java">java</label>
      <label><input type="checkbox" name="hobby" value="game">game</label>
      <label><input type="checkbox" name="hobby" value="sing">sing</label> <br><br>

---

file 文件上传

图像: <input type="file" name="image"> <br><br>

---

date/time/datetime-local 日期时间

生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>

---

number 数字输入框

<!-- 类型为number,只能输入数字 -->
年龄: <input type="number" name="age"> <br><br>

---

email 邮件输入框

<!-- 中间需要有@连接 -->
邮箱: <input type="email" name="email"> <br><br>

---

hidden 隐藏域

隐藏域在页面中对于用户是不可见的，

在表单中插入隐藏域的目的在于收集或发送信息，

以利于被处理表单的程序所使用

<!-- 隐藏域 -->
<input type="hidden" name="id" value="1">

---

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

<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">

---

select下拉列表

学历: <select name="degree" id="">
          <option value="">---------- 请选择 ----------</option>
          <option value="1">大专</option>
          <option value="2">本科</option>
          <option value="3">硕士</option>
          <option value="4">博士</option>
      </select> <br><br>

---

textarea文本域

大小可调节

cols        一行可以输入多少字符

rows        表示文本域可以输入几行

<textarea name="description" id="" cols="30" rows="10">描述:</textarea> <br><br>