HTML基础-form、input、

form表格

form不是具体的控件，而是用来组织一类控件

---

input输入框

• 属性type
  
  1. text可以输入任意<input type="text"/>
  2. password密码<input type="password"/>
  3. radio单选<input type="radio"/>一组单选框，需要指定相同的name属性
  4. checkbox复选框<input type="checkbox"/>一组复选框，需要指定相同的name属性
  5. hidden隐藏<input type="hidden"/>看不见，但可以提交数据
  6. file文件<input type="file"/>选择控件
  7. reset重置<input type="reset"/>将表单还原为初始状态
  8. submit提交<input type="submit"/>将表单信息提交给服务端
• 属性name
  单选框、复选框的分组需要用到名字
  提交数据时一定要有name值

<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="radio" name="radio"/>
<input type="checkbox" name="checkbox"/>
<input type="hidden" name="hidden"/>
<input type="file" name="file"/>

• 属性value

<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

<input type="checkbox" name="fav" value="篮球"/>篮球
<input type="checkbox" name="fav" value="足球"/>足球
<input type="checkbox" name="fav" value="羽毛球"/>羽毛球

<input type="radio" name="lesson" value="web"/>web
<input type="radio" name="lesson" value="java"/>java
<input type="radio" name="lesson" value="嵌入式"/>嵌入式

• 属性checked
  添加checked以后会选中对应的单选或复选框

<input type="radio" name="sex" value="男" checked />男
<input type="radio" name="sex" value="女"/>女

<input type="checkbox" name="fav" value="篮球" checked />篮球
<input type="checkbox" name="fav" value="足球"/>足球
<input type="checkbox" name="fav" value="羽毛球"/>羽毛球

<input type="radio" name="lesson" value="web" checked />web
<input type="radio" name="lesson" value="java"/>java
<input type="radio" name="lesson" value="嵌入式"/>嵌入式

• 属性disabled
  禁用状态

<input type="text" name="username" disabled />

• 属性readonly
  只读状态

<input type="text" name="username" readonly />

readonly 是可以提交的，disabled的值是不能提交的

---

button按钮

重置和提交还可以这么用button

<button type="reset">重置</button>
<button type="submit">提交</button>

---

select选择框

• 属性name

<select name="选择框"></select>

option

• 属性value
  当前项被选中时，
  如果有value，则提交数据时提交value的值
  如果没有value 提交数据时提交option的内容

<option value="1">篮球</option>
<option value="2">足球</option>
<option value="3">乒乓球</option>

<option value="1">羽毛球</option>
<option value="2">水球</option>
<option value="3">溜溜球</option>

• 属性disabled
  禁用状态

• 属性selected
  选中项

optgroup

• label属性

<optgroup label="A">
  <option value="1">篮球</option>
  <option value="2">足球</option>
  <option value="3">乒乓球</option>
</optgroup>

<optgroup label="B">
  <option value="1">羽毛球</option>
  <option value="2">水球</option>
  <option value="3">溜溜球</option>
</optgroup>

---

textarea文本域

• 属性name
  提交数据
• 属性rows
  放多少行，也就是设置高度
• 属性cols
  放多少列， 也就是设置多宽

<textarea name="text" rows="5" cols="50"></textarea>

---

fieldset设置控件区域块

<fieldset>
  <input type="text" name="username"/>
  <input type="password" name="password"/>
<fieldset>

legend设置区域块的标题

<fieldset>
  <legend>标题</legend>
  <input type="text" name="username"/>
  <input type="password" name="password"/>
<fieldset>

label控件提示性文字

• 属性for
  属性for相当于“关联控件的id”，这样当点击label中的文本内容时，也可以聚焦控件

<fieldset>
  <legend>标题</legend>
  <p>
    <label for="username">用户名</label>
    <input id="username" type="text" name="username" />
  </p>

  <p>
    <label for="password">密码</label>
    <input id="password" type="password" name="password"/>
  </p>

</fieldset>