HTML-input系列

body标签

-input系列
form标签
外包在input标签外，其action属性指向发送数据的后台。数据打包方式有两种，分别为get和post，使用get形式，会自动把数据打包在url（请求头*）上发送后台，在post形式，会把数据打包在内容里发往后台（请求体*）。

数据输入框
input type=‘text’ -name属性
input type=‘password’ - name属性
name值作为key，打包向后台发送用户在输入框内输入的数据，没有name后台无法获得数据。

按钮
input type=‘submit’ -value=‘提交’ ，提交按钮，表单，可向后台打包发送数据
input type=‘button’ -value=‘登陆’ ，按钮

<form  action="html基础.html" method="post">
    <!--get：把数据在url上打包发送，post：把数据在内容中打包发送-->
      <input type="text"  name="users"    />
      <input type="password" name="pwd"/>
      <!--将用户名和密码打包发往后台
          user:'****' pwd:'*****'-->
      <input type="button" value="登陆1"/>
      <!--无法提交表单数据-->
      <input type="submit" value="登陆2"/>
      <!--可以提交表单数据-->
</form>

注：get和post方法本质上并没有任何区别，没有谁更安全一说。

<form  enctype="multipart/form-data">
    <div>
        <p>请选择性别</p>
        男：<input type="radio" name="gender" value="1"  checked="checked"/>
        <!--value 为向后台提交值,checked=checked:默认被选中-->
        女：<input type="radio" name="gender" value="2"/>
        <!--name相同则互斥-->
        
        <p>爱好</p>
        羽毛球：<input type="checkbox" name="favor" value="1"/>
        跆拳道：<input type="checkbox" name="favor" value="2"/>
        足球：<input type="checkbox" name="favor" value="3"/>
        打游戏：<input type="checkbox" name="favor" value="4"/>
        网游：<input type="checkbox" name="favor" value="5"/>
        敲代码：<input type="checkbox" name="favor" value="6"/>
        
        <p>忌口</p>
        葱： <input type="checkbox" name="f" value="1"/>
        姜：<input type="checkbox" name="f" value="2"/>
        蒜：<input type="checkbox" name="f" value="3"/>
        香菜：<input type="checkbox" name="f" value="4"/>
        <!--name用于批量选择，相同的name表明同一组-->
        
        <p>上传文件</p>
        <input  type="file" name="fname"/>
    </div>
  </form>

选择框
input type=‘radio’ - 单选框 value, checked=“checked” name属性（name相同则互斥）
input type=‘checkbox’ - 复选框 value,checked=“checked” name属性（批量获取数据）

单选框中，我们为了达到只能选择一项的效果，我们必须将name值设为相同值，同时为了让后台知道我们选择哪一个，必须要向后台发送数据，这就需要value属性，我们把一个value赋值1，另一个value赋值2（其它值也可，只需是诺干个不同的值），当我们选择一项并提交时，对应value中的值就会被打包并发往后台，这样后台服务器就能得知我们选择了哪一选项，并作出相应的反应。

男：<input type="radio" name="gender" value="1"  checked="checked"/>
女：<input type="radio" name="gender" value="2"/>

checked=checked:是默认选择指令，加上之后，若不做修改则默认选择这一选项。

复选框中，同样有name属性，但name不再是相同值互斥，而是表示相同name值的选项属于同一组，例如在爱好和忌口两组中，同一组的选项拥有相同的name值。同样为了让后台知道我们做出了哪些选择，我们需要在每一组中给每个选项赋予不同的value值，从而后台通过获得的值得知选择。

<p>爱好</p>
羽毛球：<input type="checkbox" name="favor" value="1"/>
跆拳道：<input type="checkbox" name="favor" value="2"/>
足球：<input type="checkbox" name="favor" value="3"/>
打游戏：<input type="checkbox" name="favor" value="4"/>
网游：<input type="checkbox" name="favor" value="5"/>
敲代码：<input type="checkbox" name="favor" value="6"/>

<p>忌口</p>
葱： <input type="checkbox" name="f" value="1"/>
姜：<input type="checkbox" name="f" value="2"/>
蒜：<input type="checkbox" name="f" value="3"/>
香菜：<input type="checkbox" name="f" value="4"/>

文件上传
input type=‘file’ -依赖于form表单的一个属性 enctype=“multipart/form-data”

<form  enctype="multipart/form-data">

<p>上传文件</p>
<input  type="file" name="fname"/>

想要上传文件，单写<input type="file"是不够的，必须要在标签中添加上 enctype="multipart/form-data"属性，这个表示将你想要上传的文件一点一点的发送出去。

重置
input type=‘reset’ -重置

<input type="reset"   value="重置"/>

将所填写内容恢复原样。