Web前端基础知识（三）

表单的应用非常丰富，可以说，每个网站都会用到表单。下面首先介绍表单中的form标签。

---------------------------------------------------------------------------------------------------------------------------------

<form></form>:

表单中的容器，创建一个表单，就和创建一个表格差不多。表单中的所有元素必须包含在form标签内部。

form标签中最常用的是输入标签<input>

---------------------------------------------------------------------------------------------------------------------------------

<input>:

常用属性type,规定了input元素的类型。

---------------------------------------------------------------------------------------------------------------------------------

举例：

 <form action="">

        <input type="text" placeholder="请输入内容">

        <input type="text" value="请输入内容">

    </form>

效果：

对于第一种，在文本框中输入内容，灰色部分字体消失。

对于第二种，文本框自动填写内容。

---------------------------------------------------------------------------------------------------------------------------------

input 的value属性，规定了input元素的值。

input 的placeholder属性，只是给用户一个友好提示。

---------------------------------------------------------------------------------------------------------------------------------

在form表单中，有专门为input元素做标记的标签，即<label>,它的作用与<span>标签差不多。

<label>,仅限于和<input>对应使用。

举例：

 <form action="">

        <label>用户名：</label>

        <input type="text" placeholder="请输入内容">

        <br>

        <br>

        <label>密 码：</label>

        <input type="text" value="请输入内容">

    </form>

效果：

---------------------------------------------------------------------------------------------------------------------------------

input标签还可以变成单选框。比如，在有的网站注册页面时，可能会需要选择性别。

举例：

 <label for="">性别</label>

        <input type="radio">男

        <input type="radio">女

效果：

问题：

单选效果。

改进：

单选选项的name属性值一致。

 <label for="">性别</label>

        <input type="radio" name="gender">男

        <input type="radio" name="gender">女

  效果：

---------------------------------------------------------------------------------------------------------------------------------

label标签的for属性，把label标签绑定到input元素，但，label中的for属性一般是与input标签中的id所对应。id对于每个元素来说都是唯一的。

举例：

 <form action="">

        <label for="username">用户名：</label>

        <input type="text" id="username"  placeholder="请输入用户名">

        <br>

        <br>

        <label for="pwd">密 码：</label>

        <input type="password" id="pwd" placeholder="请输出密码">

        <br><br>

        <label >性别</label>

        <input type="radio" name="gen">男

        <input type="radio" name="gen">女

    </form>

效果：

---------------------------------------------------------------------------------------------------------------------------------

举例：

 <label>爱好</label>

        <input type="checkbox" name="hobbby">唱歌

        <input type="checkbox" name="hobbby">写作

        <input type="checkbox" name="hobbby">阅读

        <input type="checkbox" name="hobbby">羽毛球

效果：

---------------------------------------------------------------------------------------------------------------------------------

举例：

<input type="submit">

效果：

解释：

按钮作用：将表单中填写的数据，提交到一个地方。

---

<form>标签的一个属性 action:提交标签时，即，点击提交按钮时，向何处发送填写的数据。所以，action的属性值为 URL（需要服务器，即后端，提供API）。目前没有后端，使用“#”表示不跳转。

---

举例：

<input type="submit" value="上传">

效果：

---------------------------------------------------------------------------------------------------------------------------------

后续内容见《Web前端基础知识（四）》