Web前端基础笔记：第四章HTML-表单标签

4.1 form标签

• 对于输入框、按钮等输入控件我们需要用一个块状元素<form>把它们包起来，属于同一个表单的表单控件要包含一个在同一个块状元素<form>里面

• 标签的两个元素我们需要了解

  action：一个处理此单表信息的程序所在的URL，所述表格信息将在表单提交时被发送到定义的地址
  method：它的值可以是GET或者POST，来规定如何发送表单信息

4.2 单行文本输入框

1. 占位文本placeholder

   用于在文本框上显示提示文字，在文本框中输入内容后消失

<input type=“text” placeholder=“昵称” />

2. 输入框名字name

   为了区别其他的<input>，我们为输入框加上标签属性，作为<input>的名字，避免表单提交时与其他混淆
   

3. 输入框的值value

   如果希望在输入框中预填写用户的昵称，可以用标签属性value

<input type=“text” placeholder=“昵称” name=“nick” value=“小明”/>

4. 不可修改的输入框readonly和disabled

   在一些特殊情况中，我们分配给用户用户名，这个时候要求用户不能自行修改就要将输入框变为只读输入框

<input type=“text” placeholder=“昵称” name=“nick” value=“小明” readonly/>

或

<input type=“text” placeholder=“昵称” name=“nick” value=“小明” disabled/>

两者区别：

4.3 多行文本输入框和密码输入框

1. 多行输入框

   当多行输入框<textarea>输入的内容超过一行长度时，它会自动换行，而单行文本输入框不会
   其中rows和cols分别表示行数(高度)和文本域的可视高度
   两个属性可以不写（文本框右下角会出现一排斜线，拖动鼠标左键可以改变输入框大小）

2. 密码输入框

   密码输入框用户输入的内容会以黑圆点形式显示，只需要把<input>属性中的type=“text”改成type=“password”就可以

4.4 单选框和复选框

1. 单选框

   所谓单选框就是将控件类型type=“text”改成了type=“radio”，可与<label>叠加使用在单选框前加上提示信息（同个类型的单选框name要一样）

<input type=“radio” name=“gender” value=“male” />
<input type=“radio” name=“gender” value=“female” />

2. 复选框

   将type=“radio”改成type=“checkbox”

4.5 选项菜单

每个选项用<option>标签表示，一组选项用菜单<select>包裹

   <select name="career">
      <option value="default">请选择职业</option>
      <option value="staff">公司职员</option>
      <option value="freelancer">*职业者</option>
      <option value="student">学生</option>
      <option value="other">其他</option>
   </select>

每个option的value值要不同
给<select>标签加上multiple属性就可以通过按住ctrl并单击选项选中多个选项

4.6 按钮

因为<button>标签为闭合标签，在开始和结束标签之间，我们可以放上文字、图片、图标等
一般要在<button>标签上添加属性type=“submit”确保数据的提交

4.7 input标签小结