演習課題「メールアドレスの入力欄を作成しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。
テキスト以外の様々なinputタイプを使い、プロジェクトの具体的な情報を入力できるように機能を拡張します。まずは、「担当者メールアドレス」のinput要素のtype属性にemailを指定することで、メールアドレスの入力欄を作成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
演習課題「数値の入力欄を作成しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。
前問に引き続いて、テキスト以外の様々なinputタイプを使い、プロジェクトの具体的な情報を入力できるように機能を拡張します。次に、「予算(円)」のinput要素のtype属性にnumberを指定することで、予算の入力欄を作成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
演習課題「日付の入力欄を作成しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。
前問に引き続いて、テキスト以外の様々なinputタイプを使い、プロジェクトの具体的な情報を入力できるように機能を拡張します。次に、「希望納期」のinput要素のtype属性にdateを指定することで、希望納期(日付)の入力欄を作成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#04:入力フィールドやボタンの生成(input)
このチャプターでは、入力フィールドやボタンの生成方法について学習します。
input要素は、フォームの中で最もよく使われる要素の一つで、type属性を変更することで様々な種類の入力フィールドやボタンを生成できます。type属性には、以下のような多様な値があります。
・text: 一行のテキスト入力欄。
・password: パスワード入力欄(入力内容が隠される)。
・email: メールアドレス入力欄。
・number: 数値入力欄。
・submit: フォームを送信するボタン。
・file: ファイルを選択するためのボタン。
その他にも、date、search、rangeなど、用途に応じた多くの種類が用意されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>input要素</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<form action="">
<p>
<label>テキスト<br>
<input type="text">
</label>
</p>
<p>
<label>チェックボックス<br>
<input type="checkbox">
</label>
</p>
<p>
<label>ボタン<br>
<input type="button">
</label>
</p>
</form>
</body>
</html>
MDN web docs - <input>: HTML 入力要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input