搜寻列、登入页面、Google表单，还有...客诉表单(目死)是我们日常都会接触到的东西

这些都可以用HTML做出来~
但是他的种类真的好多呀~刚开始学的时候真得眼花撩乱的，觉得HTML最难的就是它了・゜・(PˊДˋq｡)・゜・

所以今天整理了常用表单element有哪些，以及一些简单的使用方法~

<form> 标签

• 用来包住表单物件的标签
• attribute
  • action="url" 送出表单之後接收的地方

<form action="#">
    表单内容
    表单内容
    表单内容
    表单内容
</form>

<fieldest> 把相关的选项群组起来

<legend> 群组标题

• 使用方法

  <form action="#">
      <fieldset>
          <legend>群组标题</legend>
          表单内容
          表单内容
      </fieldset>
      <fieldset>
          <legend>群组标题</legend>
          表单内容
          表单内容
      </fieldset>
  </form>
  

  
  预设外观是黑色实线
  可以用CSS的border更改样式

  fieldset{
    width: 300px;
    border:2px dotted #f00;
  }
  

  

<label>

label本身的意思就是标签，它的作用在提供<input>、<select>等相关的说明，对无障碍网页非常重要!

• attribute
  • for="代号"：<label>的for与<input>的id用相同的代号连结的话，就能在点选<label>文字时连结到输入框了
• 使用方法

  <form action="#">
  
      <!--   包住<input>   -->
      <label for="name">
          标题
          <input type="text" id="name" >
      </label>
  
      <!--   不包住<input>   -->
      <label for="name">标题</label>
      <input type="text" id="name" >
  
  </form>
  

  
  PS.<label>本身预设为inline属性，无法设定宽高

<input>

产生表单各种输入框跟选项的重要物件!透过type的类型生成不同的功能

• attribute
  • id="代号":<label>的for与<input>的id用相同的代号连结的话，就能在点选<label>文字时连结到输入框了
  • type=" "

    • type="text" 文字框

    • type="tel" 电话号码(数字)框
      咦~这也是输入文字呀?为什麽要分这麽细? 因为在有支援的装置上面，会因输入框的性质不同而有不同的介面喔!这样是不是超级贴心呢!
      (图为在IOS上的chrome介面)
      

    • type="email" 输入EMAIL框
      在有支援的浏览器上会检查输入内容是不是格式正确的EMAIL

    • type="checkbox" 核取方块

      • 使用checked="checked"可以在浏览器载入时就已经预选好

    • type="radio" 单选项目

      • 当有数个选项，想让使用者只能选其中一个时，首先把选像类型都设定为"radio"，并把每个选项都设定name="同一个代号"，这样就可以成为单选项目罗~

    • type="file" 上传档案

    • type="submit" 提交按钮

      • value=" " 按钮文字
        

         <input type="submit" value="检查完毕了!送出">
        

<form action="#">
    <!--   文字框   -->
    <div>
      <label for="name">姓名：</label>
        <input id="name" type="text">
    </div>
    <!--   电话号码(数字)框   -->
    <div>
      <label for="tel">电话：</label>
        <input id="tel" type="tel">
    </div>
    <!--   输入EMAIL框   -->
    <div>
      <label for="email">E-Mail：</label>
        <input id="email" type="email">
    </div>
    <!--  核取方块    -->
    <div>
      <label for="checkbox">
        <input id="checkbox" type="checkbox" >打勾勾
      </label>
      <label for="checkbox2">
        <input id="checkbox2" type="checkbox" checked="checked">checked="checked"在网页读取时就先勾了~
       </label>
    </div>
    <!--  单选项目    -->
    <div>
        <label for="man">radio：
          <input id="man" type="radio" name="gender">男性
        </label>
          <input id="woman" type="radio" name="gender">女性
        </label>
        <label for="child">
          <input id="child" type="radio" name="gender">儿童
        </label>
    </div>
    <!--  档案上传    -->
    <div>
      <label for="file">档案：</label>
        <input id="file" type="file">
    </div>

<select>

• attribute

  • size="整数" 加入之後变成滚轴式选单

• <option> 选项标签

  • attribute
    • value=" " 用代号表示，送出去的资料是这个代号"
    • selected 设定先选好的选项
    • disabled 将该选像设定为禁选

下拉式选单

    <!-- 下拉式选单 -->
    <select id="" >
            <option value="C1">C1</option>
            <option value="C2">C2</option>
    </select>

滚轴式选单

    <!-- 滚轴式选单 -->
    <select name="" id="" size="4" >
            <option value="2C1">C1</option>
            <option value="2C2" selected>C2</option>
            <option value="2C3" disabled>C3</option>
            <option value="2C4">C4</option>
    </select>

<textarea> 文字区块

• attribute
  • placeholder="": 输入栏位中的提示讯息(输入就会消失)
    

<textarea name="" id="" placeholder="提示讯息">textarea里面打字就是预设文字
</textarea>

输入框右下角有可以让使用者拉动调整框大小的按钮

如果害怕使用者拉动造成版面跑框，也可以在CSS设定resize:none固定住~

textarea{
    resize:none;
}

那麽以上就是最常使用的表单elements~
赶快来尝试看看吧!
明天来做一个代办清单>.^

codepen实作