2.1 <input> 要素
フォームはウェブページの重要なコンポーネントであり、ユーザーがデータを入力して送信することを可能にします。
フォームの主な要素は <input>、<textarea>、および <button> です。
これらの要素は、ユーザーがテキストを入力したり、オプションを選択したり、ファイルをアップロードしたり、他のアクションを実行できるようにします。
<input> 要素は、フォームで最も頻繁に使用される要素の一つです。多くの入力タイプをサポートし、
テキストの入力、ファイルの選択、日付の指定など、さまざまな目的で使用できます。
一般的な構文:
<input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
<input> の属性
type: 入力のタイプを指定しますname: フォーム要素の名前で、サーバー上でデータを識別するために使用されますid: 要素のユニークな識別子value: 要素の初期値placeholder: データ入力前に要素内に表示されるプレースホルダーテキストrequired: 入力が必須であることを示します
<input> の例
input-textは、1行のテキストを入力できます。
<input type="text" name="username" id="username" placeholder="ユーザー名を入力してください" required>
2.2 <textarea> 要素
<textarea> 要素は、複数行のテキスト入力に使用されます。これは <input type="text"> とは異なり、
複数行を含むテキストの入力を可能にし、サイズを調整することができます。
一般的な構文:
<textarea name="name"
id="id"
rows="rows" cols="cols"
placeholder="placeholder" required>
</textarea>
<textarea> の属性
name: フォーム要素の名前で、サーバー上でデータを識別するために使用されますid: 要素のユニークな識別子rows: テキストの行数cols: 1行に表示する文字数placeholder: データ入力前に要素内に表示されるプレースホルダーテキストrequired: 入力が必須であることを示します
使用例:
<label for="comments">コメント:</label>
<textarea name="comments"
id="comments"
rows="5"
cols="40"
placeholder="ここにコメントを入力してください..."
required>
</textarea>
<textarea> のスタイリング
<textarea> 要素は、CSS を使用してスタイルを設定し、外観やユーザーエクスペリエンスを向上させることができます。
スタイリングの例:
textarea {
width: 75%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical; /* 垂直方向にのみリサイズ可能 */
}
<label for="comments">コメント:</label>
<textarea name="comments"
id="comments"
rows="5" placeholder="ここにコメントを入力してください..." required>
</textarea>
2.3 <button> 要素
<button> 要素は、フォーム内でボタンを作成するために使用されます。
<input type="button"> とは異なり、<button> 要素はより柔軟であり、テキストや画像などの様々なHTML要素を挿入できます。
一般的な構文:
<button type="type" name="name" id="id" value="value">ボタンテキスト</button>
使用例:
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button" onclick="alert('ボタンが押されました！')">押してね</button>
<button> の属性
-
type:ボタンの動作を指定します。可能な値:submit: フォームを送信します（デフォルト値）reset: フォームをリセットしますbutton: 特定のアクションを行わないボタン
name: フォーム要素の名前で、サーバー上でデータを識別するために使用されます。id: 要素のユニークな識別子。value: フォーム送信時にサーバーに送信される値。
<button> 内の入れ子HTML
<button> 要素は、より複雑なボタンを作成するために、内部に様々なHTML要素を挿入することができます。
入れ子HTMLの例:
<button type="type" name="name" id="id" value="value">
📨送信
</button>
<button type="type" name="name" id="id" value="value">
<img src="submit_icon.png" alt="送信">
送信
</button>
<button> のスタイリング
<button> 要素は、CSS を使用してスタイルを設定し、外観やユーザーエクスペリエンスを向上させることができます。
スタイリングの例:
button {
background-color: #4CAF50; /* 緑の背景 */
color: white; /* 白いテキスト */
padding: 15px 20px; /* 内側の余白 */
border: none; /* 枠線なし */
border-radius: 4px; /* 角を丸くする */
cursor: pointer; /* ポインターのカーソル */
}
button:hover {
background-color: #45a049; /* ホバー時の濃い緑の背景 */
}
<button type="submit">送信</button>
GO TO FULL VERSION