HTML 表单简介

<form action="/abc" method="get">
    <div class="username">
        <input type="text" name="username1">
    </div>
    <div class="password">
        <input type="password" name="password1">
    </div>
    <div class="submit">
        <button>提交</button>
    </div>
</form>

POST/GET 二者区别
GET 本质：URL 的拼接，所有的参数做一个拼接，拼接成一个新的 URL

GET 向后台发请求时候，会把所有请求形式以 key=value 的形式组装到一起，然后拼接到 URL 上；POST 形式的请求 URL 不会发生变化，传输的数据依然通过浏览器传输给后台。

GET：向后台要数据，传输很少数据量指明要什么数据
POST：向后台传数据，对安全性要求较高选择 POST

form有两个关键参数：action/method
action 将表单数据提交给后台的哪个程序；method 选择 GET 或者 POST。

表单数据要被 form 标签包裹上，被 form 包裹的数据点击 submit 后会被提交给目标程序，而不被包裹的则不会被提交。

form 是表单的外壳，主要有四个属性：action/method/targer/enctype
target：何处打开 action

    <div class="username">
        <label for="username">姓名</label>
        <input id="username" type="text" name="username1">
    </div>

for 和 id 对应，点中“姓名”也即是选中了输入框

    <div class="hobby">
        <input type="checkbox" name="hobby" value="read">读书
        <input type="checkbox" name="hobby" value="music">听歌
        <input type="checkbox" name="hobby" value="study">学习
    </div>

checkbox 的 name 要设置为一样的，表示其是多选，都针对 name；value 要设置。

    <div class="sex">
        <label>性别</label>
        <input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女
    </div>

radio 为单选

    <div class="file"> <!---->
        <input type="file" name="myfile" accept="image/png">
    </div>

文件上传，只接受 accept 中的

    <div class="select">
        <select name="city"><!---->
            <option value="Beijing">北京</option>
            <option value="Shanghai" selected>上海</option>
            <option value="Hangzhou">杭州</option>
        </select>
    </div>

name 就是传给后端 key=value 的 key

    <div class="textarea"><!--多行文本-->
        <textarea name="article">

        </textarea>
    </div>


    <!--在页面中隐藏一些信息，为了安全-->
    <input type="hidden" name="abcd" value="123456">
    <input type="button" name="">
    <input type="submit" value="submit">
    <input type="reset" value="reset">

HTML 表单简介

推荐阅读更多精彩内容