| HTML＜input＞タグとその属性を使いこなす！複雑な入力欄要素を解説 | 您所在的位置：网站首页 › input属性type › HTML＜input＞タグとその属性を使いこなす！複雑な入力欄要素を解説 |
HTML＜input＞タグとその属性を使いこなす！複雑な入力欄要素を解説
|
HTML＜input＞タグとその属性を使いこなす！複雑な入力欄要素を解説
2020/12/07 2021/01/12
SHARE ツイート シェア はてブ Google+ Pocket LINEHTMLを学んでいると、多くの場面で見かけるタグ。画像表示やチェックボックス、日付表示など様々な範囲で使用されています。 inputタグはどんな使い方ができる？ 今回は、inputタグの ・基本的な使い方 ・inputタグとlabelタグを組み合わせる方法 について説明します。この記事でタグの使い方を、徹底的にマスターしましょう！ 目次 1 inputタグとは1.1 inputタグの読み方1.2 inputタグの説明1.3 inputタグで利用できる属性1.4 inputタグで使用できる型1.5 対応ブラウザ2 inputタグの基本的な使い方2.1 inputタグの使い方3 inputタグの応用的な使い方 inputタグとは
inputタグは「インプットタグ」と読みます。inputは英語で『入力』という意味を表します。 inputタグの説明inputタグは、Webページのフォーム内で表示される、チェックボックスや入力のためのテキストエリア、送信ボタンなど、フォームの部品を定義するタグです。 inputタグで利用できる属性inputタグでは以下の属性を使うことができます。 属性 説明 accept サーバーが受け取ることのできるファイルの種類を表す属性です。MINEタイプ（文書や画像など）やファイルの拡張子を指定することができます。 alt HTML文中のimg要素などが何らかの原因によって表示されなかったときに、その要素の代わりにブラウザに反映される代わりのテキストを指定する属性です。 autocomplete 要素に入力される内容をブラウザ側で自動補完するのを許可するかどうかを指定する属性です。 autofocus ブラウザが読み込みをしたときに、要素に自動でフォーカスをあてるかどうかを決める事ができる属性です。 capture ユーザーがカメラやビデオ、音声レコーダーなどのデバイスを用いて要素のキャプチャを許可するための属性です。accept属性と共に用いられます。 checked ページ読み込み時に要素にチェックを入れておくかどうかを指定する属性です。 dirname input要素で、入力されるテキストの文字方向を右書き・左書きのどちらかに指定する属性です。 disabled ユーザーによる操作を無効にするかどうかを指定する属性です。 form input要素が所属するform要素を指定する属性です。 formaction その要素の送信先を指定する属性で、form要素で定義された送信先を上書きします。 formmethod 送信ボタンの要素で、送信メソッド(GET, POST)を指定する属性です。method属性で定義された送信メソッドを上書きします。 formnovalidate 送信ボタンの要素で、送信されるデータの入力状態に関するチェックを行わないようにする属性です。novalidate属性で定義された条件を上書きします。 height 要素の高さを指定する属性です。 list input要素でテキストを入力する際、入力候補としてdatalist要素を割り当てるための属性です。datalistのid属性と紐つきます。 max 要素の最大値を指定する属性です。 maxlength 要素の最大文字数を指定する属性です。 min 要素の最小値を指定する属性です。 minlength 要素の最小文字数を指定する属性です。 multiple 複数の値を指定出来るかどうかを定義する属性です。 name 要素の名前を定義する属性です。 pattern input要素で送信されるデータのチェック時に使う正規表現を定義する属性です。 placeholder フォームの入力例や入力内容の説明を指定する属性です。 readonly 入力できる要素を読み取り専用にしてユーザーが入力できないようにする属性です。 required 入力が必須の要素かどうかを定義する属性です。 size 要素の幅を指定する属性です。要素のtype 属性がtextもしくはpasswordのときは、文字数を指定します。 src 画像やスクリプトなど、要素の参照場所を指定する属性です。 step input属性で入力可能なデータがいくつおきに変化するのかを指定する属性です。 type 要素の型を指定する属性です。 value その要素で表示する初期値を指定する属性です。 width 要素の幅を指定する属性です。 inputタグで使用できる型inputタグではtype属性で以下の型を使用できます。記述方法と表示例は以下の通りです。 1See the Pen dyXQybQ by rabbittyu (@rabbittyu) on CodePen. MEMOinputの型を指定しない場合の既定値はtextです。 対応ブラウザ対応ブラウザは以下の通りです。 PC用ブラウザ 対応状況 Chrome 完全対応 Edge 12 Firefox 1 nternet Explorer 完全対応 Opera 完全対応 Safari 1 スマートフォン用ブラウザ 対応状況 Android webview 1 Android版Chrome 完全対応 Android版Firefox 4 Android 版 Opera 完全対応 iOS版Safari 1 Samsung Internet 完全対応 inputタグの基本的な使い方
inputタグで使用できる型にもありましたが、inputタグはtype属性と組み合わせて使われることがほとんどです。 ここではtype属性を利用して、ラジオボタンを利用したアンケートを作成してみました。inputタグの属性でnameを指定しているため、「ア」か「イ」を必ず1つ選択しなければなりません。 See the Pen input by rabbittyu (@rabbittyu) on CodePen. 複数の回答を可能にする、チェックボックスを作成することもできます。ユーザーに好きな季節を訪ね、「春」「夏」「秋」「冬」の中から選択を促します。チェックボックスなので複数選択可能です。 inputタグを使用する場合はタグとタグでリストを作成し、inputタグごとにの中に入れると、扱いやすくなります。その場合は、必ずCSSでlist-style: none;を適用し、先頭の・を削除するようにしてください。 See the Pen input 2 by rabbittyu (@rabbittyu) on CodePen. inputタグの応用的な使い方
Webページを作成する際は、ユーザーにとっての使いやすさを意識しなければなりません。これがユーザビリティとアクセシビリティの向上です。 MEMOユーザビリティ：使用性・使いやすさ・使い勝手アクセシビリティ：近づきやすさ・利用のしやすさ labelタグを使わない場合は、ラジオボタン本体しかクリックすることができませんが、labelタグを設定することで「女」「男」の選択肢の部分をクリックしても、ラジオボタンに影響を与えるようになりました。 See the Pen input３ by rabbittyu (@rabbittyu) on CodePen. 今回はinputタグについてご紹介しました。 inputタグはtype属性とセットで使用することが多い inputタグはフォームの部品を作成する ユーザビリティ・アクセシビリティ向上のためにlabelタグと関連付けて使うこの3つのポイントさえ覚えておけば、フォームの中身は作成できます。ですが最後の使いやすさについても意識して作成することで、より良いサイトが作成できるでしょう。 参考文献： MDN web docks :入力(フォーム入力)要素 ユーザビリティ – Wkipedia アクセシビリティ – Wikipedia ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。 現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。
ウェブカツ!!からプログラミング初心者でも経験者でも楽しめる漫画「はたらくプログラミング」が発売されました！
KADOKAWAより全国書店で発売中です！
ウェブカツ!!から「プログラミング未経験の文系が独学で年収1000万ITエンジニアになるための入門書」が秀和システムより全国書店で発売中！
関連
SHARE
ツイート
シェア
はてブ
Google+
Pocket
LINE
CATEGORY : HTML HTMLタグ辞典 プログラミング言語TAGS : htmlinput
【初めてのHTML】押さえておくべき基本構造を解説！ 
【HTML/CSS】中央寄せの方法を徹底解説！ 
HTML初心者リファレンス『audioタグ』基本編＋応用編～音声ファイルを埋め込む方法～ 
noscriptタグとは？JavaScriptが無効である場合にのみ表示されるタグ 
【初心者の方必見！】headerタグの意味や使い方を徹底解説 
HTMLリファレンス：説明用語を定義する＜dt＞タグの使い方を徹底解説！ この記事を書いた人
ウェブカツ!!編集部
完全初心者からフリーランスITエンジニアへと育成しているフリーランス向けオンラインプログラミングスクールとしては業界初で最大級のスクール。 2万人を超える生徒が学ばれ、1000万円プレーヤーを数多く輩出。 生徒には元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われている。 また、数多くのスクールとは全く異なり「転職はあくまで将来への通過点である」「会社でしか生きられない力より会社の外で稼げる力を培う」 との理念を持った教育を行い、講師・運営陣には元野村総研のSEや京大院卒エンジニアが携わっている。 |
【本文地址】