# 表单

web2.0 时代，用户需要通过表单和互联网平台做各式各样的交互，比如提交订单、登录、发浏览言等等。

# form

像表格标签 table 一样，form 标签也代表一个表单的开始与结束。所有与表单相关的内容都应该在 form 标签内编写。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入你的名字">
    </form>
</body>
</html>

上例就是一个最简单的 form 表单。

form 表单有几种常用的属性：

name，表单名称
method，提交方式，主要有 post 和 get
action，提交地址
target，打开方式
enctype，编码方式

# input

（1）单行文本框

input 标签代表单行文本输入框，输入框有3中属性：

value，文本框的默认值
size，文本框的长度
maxlength，文本框限制最大输入长度

placeholder 表示占位符，用于提示用户输入的文字。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        姓名：<input type="text" placeholder="请输入您的姓名">
    </form>
</body>
</html>

（2）密码文本框

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        账号：<input type="text"><br>
        密码：<input type="password">
    </form>
</body>
</html>

（3）单选框

checked 属性代表默认选中。

name 属性代表同一组单选框，要想控制一组单选框只能选择一个，name 属性必须相同。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        语言
        <input type="radio" name="language" value="java" checked> Java
        <input type="radio" name="language" value="javascript"> JavaScript
        <input type="radio" name="language" value="python"> Python
    </form>
</body>
</html>

单选框搭配使用 label 标签，这样点击文字也可以选中单选按钮。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        语言
        <input type="radio" id="java" name="language" value="java" checked><label for="java">Java</label>
        <input type="radio" id="javascript" name="language" value="javascript"><label for="javascript">JavaScript</label>
        <input type="radio" id="python" name="language" value="python"><label for="python">Python</label>
    </form>
</body>
</html>

（4）复选框

checked 代表默认选中。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        爱好：
        <input type="checkbox" name="hobby" value="book" checked > 读书
        <input type="checkbox" name="hobby" value="swimming" checked > 游泳
        <input type="checkbox" name="hobby" value="basketball"> 篮球
    </form>
</body>
</html>

（5）按钮

button 和 submit 的区别在于，后者用于将表单数据提交到服务器端。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        账号：<input type="text"> <br>
        密码：<input type="password"> <br>
        <input type="button" value="提交">
        <input type="submit" value="提交">
        
    </form>
</body>
</html>

（6）重置

重置按钮可以将表单数据清空。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form action="/login" method="post">
        账号：<input type="text"> <br>
        密码：<input type="password"> <br>
        <input type="button" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

（7）文件上传

使用 multipile 属性可以上传多个文件。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        <input type="file" multiple>
    </form>
</body>
</html>

（8）多行文本框

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
        留言板：
        <textarea cols="30" rows="10" value="profile">请输入您的留言</textarea>
    </form>
</body>
</html>

（9）下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
       <select>
           <option value="Java">Java</option>
           <option value="JavaScript">JavaScript</option>
           <option value="Python">Python</option>
       </select>
    </form>
</body>
</html>

multiple 代表可以选择多个选项，size 可以设置下拉列表显示个数，其余数据通过下拉滚动条展示。

selected 表示默认选中的元素，选中的元素会高亮显示。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <form>
       <select multiple size="2">
           <option value="Java" selected>Java</option>
           <option value="JavaScript">JavaScript</option>
           <option value="Python">Python</option>
           <option value="Vue">Vue</option>
           <option value="C">C</option>
           <option value="Rust">Rust</option>
       </select>
    </form>
</body>
</html>

← 表格