フォームのレイアウト【form & table】

今回は、お問合せフォームのレイアウト例を紹介します。

フォーム作成は、tableタグを使用することで簡単に作成できます。

早速ソースをみてみましょう。

<html>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="backgroundBox">
        <div class="Container">
          <div class="formContainer">
            <form>
              <table>
                <tr>
                  <th>名前</th>
                  <td>
                    <input type="" placeholder="例:いろはに　ほへと">
                  </td>
                </tr>
                <tr>
                  <th>フリガナ</th>
                  <td>
                    <input type="" placeholder="例:イロハニ　ホヘト">
                  </td>
                </tr>
              </table>
            </form>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer></footer>
  </body>
</html>

<ポイント>

・formタグ以降に、tableを設置するだけ。また、tableの子要素th,td内に入力欄を設置する

<css>

* {
  margin: 0;
  padding: 0; }

img {
  max-width: 100%; }

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

table {
  border-collapse: collapse;
  border-spacing: 0; }
.Container {
  max-width: 780px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 50px; }

.formContainer {
  padding: 0 10px; }

.formContainer table {
  width: 100%;
  border-left: solid 1px gray;
  border-bottom: solid 1px gray; }

.formContainer table th, .formContainer table td {
  display: block;
  border-top: solid 1px gray;
  border-right: solid 1px gray;
  padding: 5px; }
  @media screen and (min-width: 600px) {
    .formContainer table th, .formContainer table td {
      display: table-cell; } }

.formContainer table th {
  color: white;
  background-color: #41d7f9; }

.formContainer table td input {
  width: 100%;
  max-width: 300px; }

.formContainer input {
  padding: 3px 5px; }

<ポイント>

・レスポンシブ対応を考えて、表の組み方を

display:block;とdisplay:table-cell;で切り替えている。

・inpuタグにpaddingを設定することで、ユーザーが入力した際に文字が見切れるの防いでいる。

今回は、formタグの後ろにはtableタグを入れるという点を覚えておけばオッケーです。

ではまた。