フォーム

フォームデザインについての章です。

ラジオボタン

ラジオボタンは「t-container」クラス内の「t-input-group」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-input-group">
  
        <div class="t-input-radio">
          <input name="i01" id="i01_01" type="radio" value="0" checked="checked">
          <label for="i01_01">希望する</label>
        </div><!-- /.t-input-radio -->

        <div class="t-input-radio">
          <input name="i01" id="i01_02" type="radio" value="1">
          <label for="i01_02">希望しない</label>
        </div><!-- /.t-input-radio -->

      </div><!-- /.t-input-group -->
  
    </section>
  </body>

テキスト

テキストは「t-container」クラス内の「t-input-group」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-input-group">
  
        <div class="t-input-name">
          <input name="i05" type="text" placeholder="氏名（全角）">
          <div class="t-input-text">様</div>
        </div><!-- /.t-input-name -->

      </div><!-- /.t-input-group -->
  
    </section>
  </body>

テキスト：「様」付き

テキスト：「様」付きは「t-container」クラス内の「t-input-group」クラス内に下記を参考に記述してください。

様

  <body>
    <section class="t-container">

      <div class="t-input-group">
  
        <div class="t-input-name">
          <input name="i05" type="text" placeholder="氏名（全角）">
          <div class="t-input-text">様</div>
        </div><!-- /.t-input-name -->

      </div><!-- /.t-input-group -->
  
    </section>
  </body>

テキスト：「様」無し

テキスト：「様」無しは「t-container」クラス内の「t-input-group」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-input-group">
  
        <div class="t-input-name-fixed">
          <input name="i06" type="email" placeholder="メールアドレス">
        </div><!-- /.t-input-name-fixed -->

      </div><!-- /.t-input-group -->
  
    </section>
  </body>

短いテキスト

短いテキストは「t-container」クラス内の「t-input-group」クラス内に下記を参考に記述してください。


  <body>
    <section class="t-container">

      <div class="t-input-group">
  
        <div class="t-input-number">
          <input name="i05" type="text">
        </div><!-- /.t-input-number -->

      </div><!-- /.t-input-group -->
  
    </section>
  </body>

送信ボタン

送信ボタンは「t-container」クラス内の「button-group」クラス内に下記を参考に記述してください。



  <body>
    <section class="t-container">

      <div class="button-group">
        <button class="t-btn t-btn-primary">登　録</button>
      </div><!-- /.button-group -->
  
    </section>
  </body>

通常ボタン

通常ボタンは「t-container」クラス内の「button-group」クラス内に下記を参考に記述してください。

ログイン画面へ 


  <body>
    <section class="t-container">

      <div class="button-group">
        <a href="javascript: void(0);" class="t-btn t-btn-normal">登　録</a>
      </div><!-- /.button-group -->
  
    </section>
  </body>

連続するボタンの間隔を詰める

下部のボタンに「t-btn-fixedmargin」クラスを追記してください。

ログイン画面へ 


  <body>
    <section class="t-container">

      <div class="button-group">
        <a href="javascript: void(0);" class="t-btn t-btn-normal">登　録</a>
      </div><!-- /.button-group -->

      <div class="button-group">
        <a href="javascript: void(0);" class="t-btn t-btn-normal t-btn-fixedmargin">ログイン画面へ</a>
      </div><!-- /.button-group -->
  
    </section>
  </body>