HTML常用的表单用法

表单是HTML中比较重要的部分，表单用于搜集不同用户的输入。
表单内容必须在<form></form>标签之间，form元素有action和method连个常用的属性， action表示一个处理这个form信息的程序所在的URL，method表示浏览器使用何种种 HTTP 方式来提交 form。常用的表单用法如下：

1.input type=text 加input type=password的使用

在很多浏览器登录和注册界面都会有用户名和登录密码，可以用input来实现：

 <form action="abc" method="get">
      <div class="username">
        <input type="text" name="usermame" placeholder="输入用户名"> 
      </div>
      <div class="password">
        <input type="password" name="password" placeholder="输入密码">
      </div>
      <div class="submit">
        <button>提交</button>
      </div>
</form>

得到的界面如下：

图1

2.在用到复选框的时候会用到 type=checkbox

<lable>地点</lable>
        <input type="checkbox" name="palce" value="changsha">长沙
        <input type="checkbox" name="palce" value="wuhan">武汉
        <input type="checkbox" name="palce" value="qinhuangdao">秦皇岛

得到的界面效果如下：

图2

可以选择多个输入，但是每个checkbox的name都应该保持一致。

3.单选框用 type=radio 实现

有的时候我们要在两个或者多个中选一个

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

得到的界面如下：

图3

4.上传文件使用 type=file

<form action="12345" method="get">
    <div class="file">
      <lable>头像</lable>
  <input type="file" name="file" accept="image/png">
    </div>
  </form>

界面如下：

图4

5.type=hidden

type=hidden 可以让表单隐藏name和value值与后台，对用户安全有一定意义。

    <div class="hidden">
    <input type="hidden" name="secret" value="love">
    </div>

6.select

select是下拉表单，可以在下拉表单中选出符合的项目。

<div class="select">
        <lable>大区</lable>
        <select name="lol" >
          <option value="aony">艾欧尼亚</option>
          <option value="dmxy">德玛西亚</option>
          <option value="hsmg" selected>黑色玫瑰</option>
          <option value="lssb">雷瑟守备</option>
          <option value="ayd">暗影岛</option>                       <option value="flezd">费雷尔卓德</option>  
          <option value="gtly">钢铁烈阳</option>
          <option value="bdec">班德尔城</option>
        </select>
      </div>

界面如下

图5

7.textarea

textarea是在文本框中输入，与input type=text不同，在textarea中输入可以换行输入。

      <div class="textarea">
        <textarea name="article" cols="30" rows="10">    </textarea>
      </div>

界面如下：

图6

8.type=button type=submit type=reset

type=button是在界面生成一个按钮，点击后不会提交；
type=submit是在界面生成一个提交按钮，点击后会提交当前输入内容；
type=reset是在界面生成一个按钮，点击后会初始化输入内容；

      <input type="button" value="button">
      <input type="submit" value="submit">
      <input type="reset" value="reset">

界面如下：

图7
以上便是form表单中常用的用法，了解更多的form表单点击form表单