フォーム表示HTMLの例と解説

フォーム表示HTMLの例と解説
出典：

HTMLで入力フォームを作成する方法（サンプルコード付き）

以下、出典から要点抜粋

#■HTML
<form>
  <div class="example">
    <label for="namelabel">名前</label>
    <input type="text" name="name" id="namelabel" placeholder="例）鈴木　太郎">
  </div>
  <div class="example">
    <label for="maillabel">メールアドレス</label>
    <input class="inputs" type="email" name="email" id="maillabel" placeholder="○○○.jp">
  </div>
   <div class="example">
    <label for="ikenlabel">ご意見</label>
    <textarea id="iken"></textarea>
  </div>
  <div class="example">
    <input type="submit" value="送信する">
  </div>  
</form>

【解説】
・フォームは＜form＞〜＜/form＞タグで挟まれ、入力フォームの内容が記載される。
・labalタグは項目とフィールドを連携させるためにある。
　labelタグのforとinputタグのidを同じにすると、ラベルとインプットが連動する。
　つまり、ラベルをクリックすると連動する入力欄にスコープが移動する。
・inputタグの中のnameタグは「inputフィールドが何を表しているのか」を表している。
・inputタグのｔｙpe属性で様々な種類のテキストフィールドを表示する事ができる。
・inputタグのtype属性”text”はテキストフィールドが表示される。
・inputタグのtype属性”submit”は送信ボタン。value属性にボタンに表示する文字列を入れる。
・inputタグのtype属性”email”はメールテキストフィールドが表示される。
・inputタグのplaceholder属性で入力例を表示できる。
・＜textarea＞〜＜/textarea＞タグで改行可能なテキストエリアを表示できる。
　長文の可能性がある情報の送信に使う。

#■CSS

@charset "UTF-8";
form {
     width: 250px;
     border: solid 1px black;
 }
label {
    display: block;
   }
.example{
    text-align: center;
}


【解説】
・
・label属性をブロック要素（block）にするとラベルが項目の上に表示される。
・

#■ラジオボタン

<form>
<label for="redlabel">
   <input type="radio" name="color" value="red" id="redlabel">
   赤
 </label>
 <label for="bluelabel">
   <input type="radio" name="color" value="blue" id="bluelabel">
   青
 </label>
 <label for="yellowlabel">
   <input type="radio" name="color" value="yellow" id="yellowlabel">
   黄
 </label>
</form>

【解説】
・inputタグのtype属性”radio”でラジオボタンが表示される。
・ラジオボタンは複数選択肢から1つを選択する場合に使用する。


#■チェックボックス

<form>
  <label for="redlabel">
    <input type="checkbox" name="color" value="red" id="redlabel">
    赤
  </label>
  <label for="bluelabel">
    <input type="checkbox" name="color" value="blue" id="bluelabel">
    青
  </label>
  <label for="yellowlabel">
    <input type="checkbox" name="color" value="yellow" id="yellowlabel">
    黄
  </label>
</form>

【解説】
・inputタグのtype属性”checkbox”でチェックボックスが表示される。
・チェックボックスは複数選択の中から「複数選択可」の場合に使用する。

#■ファイルのアップロード

<form>
<input type="file" name="sample" accept="image/jpeg, image/png, image/gif" multiple>
</form>

【解説】
・inputタグのtype属性”file”で画像などのファイルのアップロードボタンを設置できる。
・mulitiple属性を指定すると、複数ファイル選択可能になる。
・accept属性では選択可能なファイルの形式を指定する。

#■スライダー入力

<form>
小
<input type="range" name="slider" min="1" max="10">
 大
</form>

【解説】
・inputタグのtype属性”range”でレンジ入力（スライダー入力）を設置できる。
・min.max属性により選択可能範囲を決め、大きさなど大体の値をユーザーが選択できる。

#■半角数値入力

<form>
<input type="number" name="sample">
</form>

【解説】
・inputタグのtype属性”number”で半角数字のみ入力できるテキストフィールドを設置できる。

#■URL入力

<form>
 <input type="url" name="sample">
 <button type="submit">送信</button>
</form>

【解説】
・inputタグのtype属性”url”でURL入力欄を設置できる。
・見た目は「type=”text”」と同じだが、、URL形式以外の入力に対してブラウザが注意を表示する。

#■パスワード入力

<form>
 <input type="password">
 <button type="submit">送信</button>
</form>

【解説】
・inputタグのtype属性"password"でパスワード入力欄を設置できる。
・入力したテキストは「●●●」で隠される。

#■電話番号入力

<form>
 <input type="tel" name="sample">
 <button type="submit">送信</button>
</form>

【解説】
・inputタグのtype属性”tel”で電話番号の入力欄を設置できる。
・フォーカスが当たったとき、数字入力のキーボードを表示してくれる。

#■日付入力

<form>
 <input type="date" name="sample">
 <button type="submit">送信</button>
</form>

【解説】
・inputタグのtype属性"date"で日付入力欄を設置できる。
・「年」「月」「日」の3種類を入力するフィールドとなる。

#■時刻入力

<form>
 <input type="time" name="sample">
 <button type="submit">登録</button>
</form>

【解説】
・inputタグのtype属性”time”で時刻記入欄を作成できる。

#■検索フォーム入力

<input type="search" list="list"> 
<datalist id="list">
 <option value="red">
 <option value="blue">
 <option value="yellow">
 <option value="green">
</datalist>
<input type="submit" value="検索">

【解説】
・inputタグのtype属性”search”で検索入力フォームを作成できる。
・list属性とdatalistを組合せることで、入力項目の候補を表示する事ができる。

#■リセットボタン

#HTML
<form>
 <label for="labelname">お名前：<input type="text" name="name" id="labelname"></label>
 <label for="labelmail">メール：<input type="mail" name="name" id="labelmail"></label>
 <input type="reset" value="リセットする">
</form>
#CSS
label {
    display: block;
}

【解説】
・inputタグのtype属性”reset”」でリセットボタンを作成できる。
・ボタンを押すと入力された全ての内容がリセットされる。

#■色の選択

<form>
<label>色を選択
 <input type="color" name="sample_color">
</label>
</form>

【解説】
・inputタグのtype属性”color”でカラーピッカーから色を選択できる入力欄を作成できる。

#■表示しないデータ

<form>
 <label>
   <input type="hidden" value="隠しデータ">
 </label>
</form>

【解説】
・inputタグのtype属性”hidden”は隠しデータで、ブラウザに表示されない。
ユーザーに知られずにサーバーに送る情報がある時に使用する。

#■実用的なフォームの例

#HTML

<form>
    <p class="label-title">お問い合わせフォーム</p>
   <div class="form-sample">
     <p class="form-label"><span class="form-require">必須</span>氏名</p>
     <input type="text" class="form-input" placeholder="例）鈴木一郎">
   </div>
   <div class="form-radio">
     <p class="form-label"><span class="form-require">必須</span>ご職業</p>
     <div class="radio-label">
     　<label>
       <input type="radio" name="job" value="officeworker">
       会社員
     </label>
     <label>
       <input type="radio" name="job" value="student">
       学生
     </label>
     <label>
       <input type="radio" name="job" value="housewife">
       主婦
     </label>
     <label for="sonota">
       <input type="radio" name="job" value="other">
       その他
     </label>
    </div>
   </div>
   <div class="form-sample">
     <p class="form-label"><span class="form-require">必須</span>電話番号</p>
     <input type="text" class="form-input" placeholder="例）123-4567-8910">
   </div>
   <div class="form-sample">
     <p class="form-label"><span class="form-require">必須</span>メールアドレス</p>
     <input type="email" class="form-input" placeholder="例）sample@gmail.com">
   </div>
   <div class="form-sample">
     <p class="form-label last"><span class="form-require">必須</span>お問い合わせ内容</p>
     <textarea class="form-textarea"></textarea>
   </div>
   <input type="submit" class="form-Btn" value="送信する">
 </form>
 
</form>

#CSS

.label-title {
 font-size: 40px;
 text-align: center;
 border: solid 3px  #340beb;
  border-radius: 6px;
  background:  #340beb;
  color: #fff;
}
 
form {
 margin-left: auto;
 margin-right: auto;
 max-width: 720px;
 }
 
.radioinput {
 text-align: center;
 }
 
.form-sample {
 width: 100%;
 display: flex;
 align-items: center;
 padding-left: 14px;
 padding-right: 14px;
 padding-bottom: 15px;
}
 
.form-radio {
 display: flex;
 width: 100%;
 display: flex;
 align-items: center;
 padding-left: 14px;
 padding-right: 14px;
 padding-bottom: 15px;
 }
 
.radio-label {
 width: 100%;
 max-width: 500px;
 margin-left: 20px;
font-size: 18px;
}
 
.form-label {
 width: 100%;
 max-width: 248px;
 font-weight: bold;
 font-size: 19px;
}
 
.form-label.last {
 margin-top: 10px;
 margin-bottom: auto;
}
 
.form-require {
 border-radius: 5px;
 margin-right: 10px;
 padding-top: 10px;
 padding-bottom: 10px;
 width: 55px;
 display: inline-block;
 text-align: center;
 background: #340beb;
 color: #fff;
 font-size: 15px;
}
 
.form-input {
 border: 1px solid gray;
 border-radius: 5px;
 margin-left: 40px;
 padding-left: 10px;
 height: 50px;
 width: 100%;
 max-width: 410px;
 font-size: 18px;
}
 
.form-textarea {
 border: 1px solid gray;
 border-radius: 6px;
 margin-left: 40px;
 padding-left: 1em;
 padding-right: 1em;
 height: 216px;
 flex: 1;
 width: 100%;
 max-width: 410px;
 font-size: 18px;
}
 
.form-Btn {
 border-radius: 6px;
 margin-top: 32px;
 margin-left: auto;
 margin-right: auto;
 padding-top: 20px;
 padding-bottom: 20px;
 width: 280px;
 display: block;
 letter-spacing: 0.05em;
 background: #340beb;
 color: #fff;
 font-weight: bold;
 font-size: 20px;
}

【解説】（出典のまま）
[HTML]ポイント
①お問い合わせフォームは、＜form＞〜＜/form＞の中に記載します。
②2行目にタイトルをつけました、タイトルを作成することにより、このフォームは「お問い合わせフォームなのか」「予約フォームなのか」なんのフォームなのかをユーザーにわかりやすくする事ができます。
③type属性を確認していきます。
表示結果、1行目は「氏名」を入力するテキストを作成しているので→「type=”text”」2行目は「職業」を入力するラジオボタンを作成しているので→「type=”radio”」3行目は「電話番号」を入力するテキストを作成しているので→「type=”number”」4行目は「メールアドレス」を入力するテキストを作成しているので→「type=”mail”　」5行目は「お問い合わせ内容」を入力するテキストエリアを作成しているので→type属性ではなく＜textarea＞〜＜/textarea＞属性で表示します。
④フォームに「送信ボタン」はつきもの。「type=”submit”」でボタンを作成し、「value=”〇〇”」の〇〇にボタンに表示したい文字を記入
[CSSポイント]
①「.label-titleクラス」でフォームタイトルを装飾しています。
タイトルのfont-size,colorなどはこちらから変更して下さい。
②「.form-radioクラス」にdisplay: flexを指定し、子要素の「.form-labelクラス」「.radio-label」を横並びにする事で「必須・氏名・テキストフィールド」を横並びにしています。
③pタグの中に、spanタグを入れ「必須マーク」を作成しています。
④「.form-inputクラス」でテキストフィールドの大きさ枠線を指定しています。border: 1px solid gray；の指定によりテキストフィールドに枠線を表示する事ができ、よりわかりやすいフォームにする事ができます。

【総まとめ】（出典のまま）
1.フォームを作成するには、formタグを使用し、＜form＞〜＜/form＞の間に記述する。
2.labelのfor属性とinputのid属性を連動させ項目とフォームを連動させる。
3.inputのtype属性を変更する事で様々なタイプのテキストフィールドを表示させる事ができる。
「type=”text”」→テキストフィールド
「type=”radio”」→ラジオボタン
「type=”checkbox”」→チェックボックス
「type=”file”」→ファイルアップロード
「type=”range”」→レンジ入力
「type=”number”」→半角数字入力
「type=”url”」→url入力
「type=”password”」→パスワード入力
「type=”tel”」→電話番号入力
「type=”date”」→日付入力
「type=”time”」→時刻入力
「type=”search”」→検索入力
「type=”reset”」→リセットボタン
「type=”color”」→色の入力
「type=”hidden”」→隠しデータ