text入力は「なんでも文字を入れてもらうための“1行の入力欄”」
type="text" の入力欄は、 「ユーザーに自由な文字列を 1 行ぶん入力してもらうための入り口」 です。
名前 タイトル ニックネーム 検索キーワード
みたいな、「とりあえず文字を入れてもらえればいい」場面で、いちばんよく使われます。
text入力の基本形と“最低限押さえるべき属性”
いちばんシンプルな書き方
<input type="text" name="username">
ここでの意味は、
type="text"… 自由な文字列を 1 行入力する欄name="username"… 送信するときの「キー名」
フォームに入れるとこうなります。
<form action="/signup" method="post">
<p>お名前：</p>
<input type="text" name="username">
<button type="submit">送信</button>
</form>
ユーザーが「MONO」と入力して送信すると、 サーバー側にはだいたい username = "MONO" という形で届きます。
重要ポイント：text入力を書いたら、必ず name を付ける。 name がないと、送信されるデータにその値が含まれません。
placeholder と value：ユーザーへのヒントと初期値
placeholder は「入力前に薄く出るヒント」
<input
type="text"
name="username"
placeholder="山田太郎"
>
placeholder は、 「ここにはこういう感じの値を入れてね」というヒントです。
- 入力前 → 薄いグレーで表示される
- 入力すると → ヒントは消えて、ユーザーの文字が入る
フォームの UX を上げるうえで、かなり重要な属性です。
value は「実際の中身（初期値もここ）」
<input
type="text"
name="username"
value="MONO"
>
value は「今その入力欄に入っている値」です。
- HTML に書いておけば「初期値」になる
- JavaScript から書き換えれば「現在値」が変わる
placeholder はあくまでヒントで、送信される値にはなりません。 送信されるのは value の方です。
「ヒントは placeholder、本当の中身は value」 この切り分けをちゃんと理解しておくと、混乱しなくなります。
よくある text入力の使い方をフォームでイメージする
名前・タイトル・検索キーワードなどの基本フォーム
<form action="/search" method="get">
<p>キーワード検索：</p>
<input
type="text"
name="q"
placeholder="JavaScript フォーム 基礎"
>
<button type="submit">検索</button>
</form>
ここでの流れは、
- ユーザーがキーワードを入力する
- 送信すると
?q=入力値の形で URL に付く（GET） - サーバー側は
qの値を使って検索する
text入力は「検索フォームの心臓部」 と言ってもいいくらい、よく使われます。
JavaScript と text入力：値を読む・書く・チェックする
値を読む（ユーザーが入力した文字を取り出す）
HTML：
<input type="text" id="username" name="username" placeholder="お名前">
<button type="button" id="show">表示</button>
<p id="result"></p>
JavaScript：
const input = document.querySelector("#username");
const button = document.querySelector("#show");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const value = input.value; // ← ここが超重要
result.textContent = `入力された名前：${value}`;
});
input.value が「今その text入力に入っている文字」です。 フォームを送信しなくても、リアルタイムに読めます。
値を書く（初期値や変更を JS から反映する）
input.value = "MONO"; // 初期値をセット
ユーザーが入力したあとに、 何かの処理結果を反映して書き換えることもできます。
簡単なバリデーションを JS でやる
button.addEventListener("click", () => {
const value = input.value.trim(); // 前後の空白を削る
if (value === "") {
result.textContent = "名前を入力してください。";
return;
}
if (value.length < 2) {
result.textContent = "名前は 2 文字以上にしてください。";
return;
}
result.textContent = `OK：${value}`;
});
ここでやっているのは、
- 空かどうか
- 長さが足りているか
というチェック。 text入力は「ユーザーの自由入力の入口」、 JavaScript は「その入力をどう扱うか」を決めるロジック という関係です。
HTML側のバリデーション属性も組み合わせる
required で「必須入力」にする
<input
type="text"
name="username"
required
placeholder="お名前"
>
required を付けると、 空のまま送信しようとしたときにブラウザが止めてくれます。
minlength / maxlength で文字数を制限する
<input
type="text"
name="username"
minlength="2"
maxlength="20"
>
- 2 文字未満 → ブラウザが「短すぎます」と警告
- 20 文字より長い → それ以上入力できない（ブラウザによる）
「簡単なチェックは HTML に任せて、 複雑なロジックは JS でやる」 この分担を意識すると、コードがスッキリします。
text入力を使うか迷ったときの判断基準
「ここは“自由な文字列を 1 行ぶん”入れてもらう場所か？」
自分にこう聞いてみてください。
「ここでユーザーに入力してもらいたいのは、 決まった形式じゃなくて“とりあえず文字”か？」
YES なら type="text" が候補になります。
名前 タイトル 検索キーワード ニックネーム
こういうものは、 まず text入力で考えるのが自然です。
逆に、
メールアドレス → type="email" 数値 → type="number" 日付 → type="date"
のように、「入力の種類がはっきりしている」なら 専用の type を使った方が、ブラウザのサポートが効いて便利です。
初心者として「text入力」で絶対に掴んでほしいこと
type="text" の input は、 「ユーザーに自由な文字列を 1 行ぶん入力してもらうための基本の入力欄」 です。
name が送信時のキー名になる placeholder はヒント、value は実際の中身 JavaScript では input.value で値を読み書きする required や minlength などで簡単なチェックもできる
あなたが text入力を書くときに、 「この欄は“何という項目の、どんな文字列”を受け取るためのものか？」 と一度自分に問いかけられるようになったら、 もう text入力を“ただのテキストボックス”ではなく、 “ユーザーとアプリをつなぐ、いちばん基本のインターフェース”として扱えている状態です。