入力タグ input,textarea,select,buttonなどの入力フィールドの使い方

<input> タグ

<input> タグは、さまざまな種類のデータ入力フィールドを定義するために使用されます。
type 属性を指定することで、フィールドの種類を決定します。

テキストボックス <input type="text">

定義

単一行のテキスト入力フィールド。

<label for="name">名前:</label>
<input type="text" id="name" name="name">

パスワードフィールド <input type="password">

定義

入力内容が隠されるパスワード入力フィールド。

<label for="password">パスワード:</label>
<input type="password" id="password" name="password">

メールフィールド <input type="email">

定義

メールアドレスを入力するためのフィールド。入力内容の検証が行われる。

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">

数値フィールド <input type="number">

定義

数値を入力するためのフィールド。範囲やステップを指定することができる。

<label for="age">年齢:</label>
<input type="number" id="age" name="age" min="1" max="100">

日付フィールド <input type="date">

定義

日付を入力するためのフィールド。カレンダーウィジェットが表示される。

<label for="birthday">誕生日:</label>
<input type="date" id="birthday" name="birthday">

ラジオボタン <input type="radio">

定義

複数の選択肢から1つを選ぶためのボタン。

<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

チェックボックス <input type="checkbox">

定義

複数の選択肢から複数を選ぶことができるボックス。

<label><input type="checkbox" name="hobbies" value="reading"> 読書</label>
<label><input type="checkbox" name="hobbies" value="traveling"> 旅行</label>

ファイル入力フィールド <input type="file">

定義

ファイルを選択してアップロードするためのフィールド。

<label for="file">ファイルを選択:</label>
<input type="file" id="file" name="file">

サブミットボタン <input type="submit">

定義

フォームのデータを送信するためのボタン。

<input type="submit" value="送信">

リセットボタン <input type="reset">

定義

フォームの入力フィールドの値をリセットするためのボタン。

<input type="reset" value="リセット">

テキストエリア <textarea>

<textarea> タグは、複数行のテキスト入力フィールドを定義するために使用されます。

定義

複数行のテキストを入力するためのフィールド。

<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

ドロップダウンリスト <select><option>

<select> タグと <option> タグは、
選択肢のリストから1つを選ぶためのドロップダウンメニューを作成するために使用されます。

定義

選択肢のリストから1つを選ぶためのドロップダウンメニュー。

<label for="country">国:</label>
<select id="country" name="country">
    <option value="japan">日本</option>
    <option value="usa">アメリカ</option>
    <option value="china">中国</option>
</select>

ボタン <button>

<button> タグは、クリック可能なボタンを作成するために使用されます。
ボタンの内容はテキスト、画像、または他のHTML要素を含むことができます。

定義

クリック可能なボタン。

<button type="submit">送信</button>

ボタンのタイプ

type 属性を使用して、ボタンの機能を指定します。

  • submit:フォームを送信するボタン。
  • reset:フォームのフィールドをリセットするボタン。
  • button:何も行わない標準的なボタン(JavaScriptと組み合わせて使用)。
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button" onclick="alert('Hello!')">クリック</button>

まとめ

<input>, <textarea>, <select>, <button> タグを使用して、
さまざまな種類のデータ入力フィールドを作成することができます。
これらの要素を適切に組み合わせてフォームを作成することで、
ユーザーからのデータ収集を効率的に行うことができます。
また、CSSを使用して入力フィールドの外観をカスタマイズすることで、
より魅力的で使いやすいフォームを提供することが可能です。