名前、性別、メールアドレスを登録するHTMLフォームのサンプルコード

2023-04-22

以下は名前、性別、メールアドレスを登録するHTMLフォームのサンプルコードです。

<form>
	<label for="name">名前:</label>
	<input type="text" id="name" name="name"><br><br>
	
	<label for="gender">性別:</label>
	<input type="radio" id="male" name="gender" value="male">
	<label for="male">男性</label>
	<input type="radio" id="female" name="gender" value="female">
	<label for="female">女性</label><br><br>
	
	<label for="email">メールアドレス:</label>
	<input type="email" id="email" name="email"><br><br>
	
	<input type="submit" value="送信">
</form>

このコードでは、<form>要素でフォームを定義し、<label>要素と<input>要素を使用して名前、性別、メールアドレスの3つの入力フィールドを作成しています。性別にはラジオボタンを使用し、男性と女性の2つの選択肢を提供しています。最後に、<input>要素を使用して送信ボタンを追加しています。

年齢を含めた場合

以下は名前、性別、年齢、メールアドレスを登録するHTMLフォームのサンプルコードです。

<form>
	<label for="name">名前:</label>
	<input type="text" id="name" name="name"><br><br>
	
	<label for="gender">性別:</label>
	<input type="radio" id="male" name="gender" value="male">
	<label for="male">男性</label>
	<input type="radio" id="female" name="gender" value="female">
	<label for="female">女性</label><br><br>
	
	<label for="age">年齢:</label>
	<input type="number" id="age" name="age"><br><br>
	
	<label for="email">メールアドレス:</label>
	<input type="email" id="email" name="email"><br><br>
	
	<input type="submit" value="送信">
</form>

このコードでは、年齢を含めた入力フィールドを追加するために、<label>要素と<input>要素を使用して<form>要素を更新しています。年齢の入力フィールドには、type="number"属性を使用して数値フィールドを指定しています。