この記事はHTMLのinputタグについて解説していきます。inputタグはお問い合わせのフォームなどで使われることが多いです。ユーザにテキストを入力させたり、選んだ項目にチェックをつけさせるために使用します。以下に、inputタグの主な使い方について解説していきます。
テキスト
ユーザーがテキストを入力するためのフィールドを作成します。
<input type="text" name="username" placeholder="ユーザー名">type="text": テキスト入力フィールドを表示します。name: フォーム送信時にデータを識別するための名前を指定します。placeholder: テキスト入力フィールドに表示されるプレースホルダー テキストを指定します。
プレースホルダーはユーザが何も入力していない時に、表示されるテキストのことです。”名前を入力してください”などとユーザに対してアクションを促す文章を入れたりします。
パスワード
ユーザーがパスワードを入力するためのフィールドを作成します。
<input type="password" name="password" placeholder="パスワード">type="password": パスワード入力フィールドを表示します。
パスワード入力はユーザが入力したテキストが下記のように、点で表示されるようになります。
ラジオボタン
ユーザーが選択肢から1つを選ぶためのラジオボタンを作成します。
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性type="radio": ラジオボタンを表示します。name: ラジオボタンのグループを形成するための名前を指定します。value: ラジオボタンの値を指定します。(表示されているテキストとは別物です)
ラジオボタンはあくまで選択肢の中から一つを選ぶものなので、複数を選択させたい場合などは後ほど紹介するチェックボックスを利用しましょう。
チェックボックス
ユーザーが選択肢から複数の項目を選ぶためのチェックボックスを作成します。
<input type="checkbox" name="hobbies" value="reading"> 読書
<input type="checkbox" name="hobbies" value="sports"> スポーツtype="checkbox": チェックボックスを表示します。name: チェックボックスのグループを形成するための名前を指定します。value: チェックボックスの値を指定します。(表示されているテキストとは別物です)
チェックボックスは複数の項目を選ばせるのに向いています。追加でオプションを付ける場合などに使われることが多いです。
まとめ
この記事はinputタグの基本的な使い方について解説しました。お問い合わせフォームなどの実装は多くのWebサイトで使われるので避けては通れない道です。今回紹介した以外にも、メールアドレスの入力など他にも種類がたくさんあるので、その場面に適したinputタグを使うようにしていきましょう。最初は難しいと思いますが、継続して頑張れば必ずできるはずなので頑張ってください。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント