HTML表单

作为一名小白，我在上若愚老师直播课的时候，觉得表单真的好难好难啊！

这次认真总结一下：

表单的作用

HTML表单用于搜集用户的信息输入

表单简介

表单是一个包含表单元素的区域，表单元素是允许用户在表单输入内容的元件，比如：文本域、下拉列表、单选框、复选框等。表单必须使用表单标签来设置：

<form>
input元素
</form>

多数情况下被用到的表单标签是输入标签<input>，输入类型是由类型属性type来定义的。

表单实际操作

文本域：text

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
<form>
    First Name: <input type="text" name="firstname"><br>
    Last Name: <input type="text" name="lastname">
    <button>提交</button>
</form>
</body>
</html>

Paste_Image.png

密码
密码字段通过标签<input type = "password">来定义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
<form>
    First Name: <input type="text" name = "firstname"><br>
    Last Name: <input type="text" name = "lastname"><br>
    Password: <input type = "password" name = "password">
    <button>提交</button>
</form>
</body>
</html>

单选按钮
用<input type = "radio">来定义表单单选选项

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
<form>
    First Name: <input type="text" name = "firstname"><br>
    Last Name: <input type="text" name = "lastname"><br>
    Password: <input type = "password" name = "password"><br>
    <p>单选</p>
    <input type = "radio" name="sex" value="male">男性<br>
    <input type = "radio" name="sex" value="female">女性
    <button>提交</button>
</form>
</body>
</html>

Paste_Image.png

复选框
用<input type="checkbox">定义复选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
<form>
    First Name: <input type="text" name = "firstname"><br>
    Last Name: <input type="text" name = "lastname"><br>
    Password: <input type = "password" name = "password"><br>
    <p>单选</p>
    <input type = "radio" name="sex" value="male">男性<br>
    <input type = "radio" name="sex" value="female">女性
    <p>复选框</p>
    <input type = "checkbox" name="vehicle" value="Bike">Bike<br>
    <input type = "checkbox" name="vehicle" value="Car">Car<br>
    <input type = "checkbox" name="vehicle" value="Motobike">Motobike
    <button>提交</button>
</form>
</body>
</html>

Paste_Image.png

带有预选值的下拉列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
<form>
    First Name: <input type="text" name = "firstname"><br>
    Last Name: <input type="text" name = "lastname"><br>
    Password: <input type = "password" name = "password"><br>
    <p>单选</p>
    <input type = "radio" name="sex" value="male">男性<br>
    <input type = "radio" name="sex" value="female">女性
    <p>复选框</p>
    <input type = "checkbox" name="vehicle" value="Bike">Bike<br>
    <input type = "checkbox" name="vehicle" value="Car">Car<br>
    <input type = "checkbox" name="vehicle" value="Motobike">Motobike
    <p>下拉列表</p>
    <select name="cars">
    <option value="volvo">VOLVO</option>
    <option value="benz">BENZ</option>
    <option value="AUDI" selected>AUDI</option>
    <option value="SAAB">SAAB</option>
    </select>
    <button>提交</button>
</form>
</body>
</html>

Paste_Image.png

提交按钮
<input type="submit">定义提交按钮。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单</title>
</head>
<body>
<form>
    First Name: <input type="text" name = "firstname"><br>
    Last Name: <input type="text" name = "lastname"><br>
    Password: <input type = "password" name = "password"><br>
    <p>单选</p>
    <input type = "radio" name="sex" value="male">男性<br>
    <input type = "radio" name="sex" value="female">女性
    <p>复选框</p>
    <input type = "checkbox" name="vehicle" value="Bike">Bike<br>
    <input type = "checkbox" name="vehicle" value="Car">Car<br>
    <input type = "checkbox" name="vehicle" value="Motobike">Motobike
    <p>下拉列表</p>
    <select name="cars">
    <option value="volvo">VOLVO</option>
    <option value="benz">BENZ</option>
    <option value="AUDI" selected>AUDI</option>
    <option value="SAAB">SAAB</option>
    </select>
    <p>提交按钮</p>
    Username: <input type="text" name="User">
    <input type="submit" value="Submit">
    <button>提交</button>
</form>
</body>
</html>

表单的action与method

action：提交数据的后台地址
method分为两种：get与post，两种不同提交方法的差异可以在Chrome“审查元素”——“Network”中查看到效果。
get：本质是URL的拼接，用key = value的形式来组装，形成新的URL，且传输数据量有一定限制，最多1k
post：URL不发生变化，但是参数仍然可以发送到服务器中：传输数据量无限制
两种方法都是浏览器向服务器提交数据的方式。

文章著作权归饥人谷_Lyndon和饥人谷所有，转载须说明来源

HTML表单

表单的作用

表单简介

表单实际操作

表单的action与method

推荐阅读更多精彩内容