33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

テキスト入力欄の種類について

本日の教材動画はこちら 

 

テキスト入力のタイプについて

テキスト入力には下記の3タイプがある

・1行タイプ ( inputタグ / type"text" )

・パスワードタイプ ( inputタグ / type"passeord" )

・複数行入力できるタイプ ( textareaタグ )

<1行タイプ>について

1行タイプは名前の通り、1行だけの簡単な入力フォームの事。フォームに入力した文字がそのまま表示される。使い方は<input type="text">

<パスワードタイプ>について

パスワードタイプは1行タイプと同じ入力フォームだが、フォームに入力した文字はそのまま出力されず *** で表示される。名前の通り、よくパスワード入力に使われるタイプですね!使い方は<input type="password">

<複数行入力するタイプ>について

今までは1行だけ入力できたが、このタイプは複数行入力できるようになる。使い方は<textarea></textarea> で、これだけ単独タイプではない。

 

フォームの初期設定は2行表示で1行20文字まで入力可能だが、行数を増やしたい場合はtextareaの後ろに rows="数字"(数字に入れた数が行数になる)を、行の文字数を増やしたい場合は cols="数字"(数字に入れた数が文字数になる)を追加するとその通りになる。

 

タグ内は空白でもいいが、文字を入力してあげるとフォームに最初から入力した文字が表示されるようになる。入力者の手間を省いてあげたい場合は書いておいてあげると、入力漏れなどが減ってよい。

<フォームに名前を付ける>方法について

このままでは分かりづらいため、それぞれのフォームに名前を付けてあげるとよい。付け方は name=”名前” をタグ内に追加してあげるだけ。

 

名前を付けてあげることで、送信された際に何の情報かわかりやすくなるんだと思いますが、今回はその送信までは教えられておらず…。調べてみたらinputタグには名前と行と文字数以外にもいろいろ追加できる要素があるようですので、今回の勉強では深く掘り下げず、一旦ここで切り上げることにします! 

 

今回勉強した内容

今回勉強した内容

 

出来上がったページ

出来上がったページ