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

HTMLで入力フォームを作成する方法（サンプルコード付き）入力フォームの作成方法を初心者の方向けに紹介。サンプルコード付きで、基礎的な入力フォームの作成方法から、様々な種類の入力フォームを学ぶことができます。またCSSで入力フォームの装飾も解説しています。全てサンプルコードがついていますので、コピペでご自身のWEBサイトに使用することができます。

digitor.jp

以下、出典から要点抜粋

#■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”」→隠しデータ