入力タグ 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を使用して入力フィールドの外観をカスタマイズすることで、
より魅力的で使いやすいフォームを提供することが可能です。
高度な配列メソッド:map, filter, reduce
8月 20, 2024モジュールとインポート/エクスポートについて
8月 17, 2024ローカルストレージとセッションストレージ
8月 16, 2024