HTML-表单标签

我们在浏览web网页时，有时候需要用户的输入来提供信息，例如：注册登录网站，输入个人信息（姓名，地址.......），过滤内容，进行搜索，上传文件。

为了满足这些需求，HTML提供了许多交互式表单控件，例如：文本输入（单行或多行），单选按钮，复选框，下拉菜单，提交按钮等。

from标签

通常的注册表单里都是输入框，按钮等表单元素，然而对于这些表单控件，我们需要用一个块状元素<from>把他们包起来，即属于一个表单的元素，都要包含在同一个块状元素<from>里。

这个标签有两个属性，action，method。

action：一个处理此表单信息的程序所在的 URL，所述表action格信息将在表单提交时被发送到定义的地址;

method:它的值可以是 GET或POST，用来规定如何发送表单信息;

<form action="">
  <!-- 这里会有一些表单控件 -->
</form>

单行文本输入框

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

<input>不仅是一个内联标签，而且还是一个只有开始的标签，可以认为他为一个“自闭”元素。

type

type属性表示文本框应该输入的文本的格式。

占位文本 placeholder

上图代码中placeholder中有“昵称”两字，然而这两个字不会实际出现在我们的文本输入框中，会在我们点击文本框以后消失，这就是占位文本，通常用来提醒用户输入内容。

输入框的名字

为了区别各个<input>，我们需要给昵称输入框加上属性标签name，设置为<input>的名字，这样在提交表单数据的时候，就不会将多个<input>搞混了。

输入框的值value

如果我们希望在输入框中预填写用户的昵称，那么我们可以用属性标签value，这样文本框内将会直接出现value中的值。

不可修改的输入框“readonly”和“disabled”

在一些特殊情况下，我们会给用户分配名称，这个时候我们并不希望用户自行更改，那么我们就可以在<input>中添加“readonly”和“disabled”这两个属性，将输入框变成只读输入框，这样用户就无法修改预填写的内容了。

但两者实际有一定区别的。

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

多行输入框

当多行文本框输入的内容超过一行长度时，它会自动换行，而单行文本框则不会。

我们用<textarea>标签来写多行输入框。

<textarea
  name="sign"
  rows="6"
  cols="15"
  placeholder="请输入个性签名"
></textarea>

rows表示行数（文本框高度），cols表示文本域可视宽度。

如果这两个属性不写，则<textarea></textarea>就表示一个多行输入框。同时右下角会看到一排斜线，按住斜线拖动，可以改变输入框的大小。

密码输入框

密码输入框会将用户输入的内容以黑圆点的形式展现出来。

实现方式即将<input>中的标签属性type="text"改成type="password"就可以了。

单选框和复选框

单选框

最经典的例子，男女性别单选题。

<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女

单选框也只是将控件类型type的属性改为了type=“radio”。

属于同一道“单选题”的每个单选按钮，应该拥有相同的name属性值。

value=" "中的内容将不会显示，而是会成为表单数据提交时的内容。

而选项的内容我们可以直接写在<input>标签之后。

但是经过上述代码，单选框实现了，但点击区域比较小，如果能点击文字也能进行选择就好了。

因此为了达到这个目的，我们常用<label>标签将<input>包围

<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>

第二种写法：

<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>

给<input>加了一个属性id=“”，给<label>标签也加了一个属性for=""。这样两者之间就产生了一一对应关系。

复选框

我们将type属性改为type="checkbox"。

<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>

属于同一道”多选题”的每个复选框元素，应该拥有相同的name属性值。

就可以实现多选，选择后取消的功能了。

选项菜单

实际情况中可能产生更多的选项，因此我们可以使用选项菜单这种功能。

因此我们需要用到新的标签<select>和<option>。

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

提交的内容还是value的值，因此每个value的值要不同。

如果我们想实现一个多选菜单，那么我们给<select>添加一个multiple属性就行了，这样我们可以通过按住Ctrl并单击选项来实现选中的多个选项。

按钮

表单完成注册，提交信息等都需要一个按钮，我们在此会用到一个<button>标签。

<button>确认注册</button>

我们在<button>这个闭合标签中间可以填上文字，图片，图标等。

<button type="submit">确认注册</button>

这个按钮放在form中会在点击的时候自动提交表单数据，但是在button 提交表单数据这一点上是有浏览器兼容性问题的，一般还是需要加上 type=“submit”来确保数据的提交。