HTML标签之form,input,button,table

form

• 如果form表单里边没有提交按钮，就无法提交这个form，除非使用JS

     <form action="users" method="POST">
           <input type="text" name="username">
           <input type="password" name="userpassword">
           <input type="submit" value="提交">
       </form>

复制代码

• form使用的是post请求
• form中的内容是form发起的post请求的第四部分（就是key）
• 第四部分使用utf-8编码

form和a的区别

• form使用的是post请求
• a使用的是get请求
• get默认会把参数放在查询参数里边
• post默认会把参数放在第四部分里边（form data）
• 可以通过给url直接加参数让post也有查询参数

       <form action="users?chaxuncanshu=555" method="POST"></form>
复制代码

• 不可能让get请求有第四部分

form标签和a标签相同

同样使用target的4属性

<form action="users?chaxuncanshu=555" method="POST" target="_blank">

复制代码

input

提交按钮的写法

必须写上name

<input type="text" name="username">
<input type="password" name="userpassword">
复制代码

必须写上name否则提交服务器的时候不会带上值

type类型怎样才是提交

           <input type="submit" value="提交">
复制代码

可以提交

           <input type="button" value="提交">
复制代码

不可以提交

label的for和input的ID是一对

 <input type="checkbox" id="xxx"><label for="xxx">爱我</label>

复制代码

此时点击爱我文字也可以勾选框

label包裹input

<label >爱我<input type="checkbox" ></label>
复制代码

<label>账号<input type="text" name="username"></label>
复制代码

高级用法，可以省去for和ID

多选框

关键词：checkbox name同一类

必须写上name否则提交服务器的时候不会带上值

喜欢的水果<label>香蕉<input type="checkbox" name="fruit" value="banana"></label>
         <label>橘子<input type="checkbox" name="fruit" value="orange"></label>
复制代码

提交的时候这样都可以提交上去

单选框

关键词： type = radio，有同一个name

选择一款手机购买
<label>xiaomi<input type="radio" name="only" value="xiaomi"></label>
<label>huawei<input type="radio" name="only" value="huawei"></label>
复制代码

下拉框

单选

<select name="group" id="">
    <option value="1">第一组</option>
    <option value="2" selected>第二组</option>
    <option value="3" disabled>第三组</option>
    <option value="4">第四组</option>
</select>
复制代码

属性：多选

多选

<select name="group" id="" multiple>
复制代码

button

• if type=button，则为button按钮无法提交
• 如果button没写type，则自动升级为submit可以提交

table

tips

2.

3.

4.

5.

转载于:https://juejin.im/post/5c81e9c0f265da2da40837ca