2021-12-02AdvertisementsほかのHTMLタグと比べると複雑な印象のある入力フォームで、フォームの部品をつくるのに使われるタグと、それぞれのタグでよく使われる属性について、改めてまとめてみました。フォームで必須&よく使われるHTMLタグの<form>,<input>,<textarea>,<select>,<label>,<button>の6つを順番に深めていきます。Maxlength属性Size属性Disabled属性<textarea>タグ<select>タグ<label>タグ2つの記入方法<button>タグまとめ<form>タグフォームを作成する際に、<form>〜</form>タグでかこみます。フォームの部品(テキストボックスやボタン、チェックボックス等)となる部分を<form>タグの中に配置します。入力したフォームのデータを送る送信先を指定。記述がない場合は、表示しているURLに送られます。入力したフォームのデータの送信方法を設定。値は、”get”(初期値)か”post”を選択できますが、個人情報が表示されてしまうのを防ぐため、基本post(データをURL以外で送信)を選択します。フォームが送信するデータの形式を指定します。通常指定は不要ですが、添付ファイルを送る機能をつける場合、enctype=”multipart/form-data”(データをマルチパートデータとして送信)を指定する必要があります。<input>タグフォームの部品をつくります(テキストボックスやチェックボックス等)。属性はたくさんあるみたいですが、使いそうな種類をメモしました。inputタグにcssの疑似要素は使えません。Type属性inputタグの形式を指定。デフォルトの初期値はtype=”text”ですが、type属性を指定すると、それぞれに合わせた入力欄になり、使いやすくなります。name="email"><!--ラジオボタン(1つだけ選択が可能)--><!--checkedで、最初から選択しておくことができる。value="送信する">Name属性フォームの入力欄の名前です。書いておくとそれぞれの区別がつきやすいのと、データ送信時に一緒に送られます。(javascriptなどでも参照できるようなので、半角英数字の名前が無難そう)Value属性フォームの値のことです。name属性と一緒に使われるケースが多いです。送信される値の初期値になります。value属性を書いてない場合、「name属性名=on」というデータが送信されます。urlの時に使用可能です。value属性との違いは、value属性だと値の初期値になりますが、placeholderの場合は、フォームへの入力を促すための入力例です。加えると項目の入力が必須になります。urlの時に使用します。maxlength属性で最大の文字数、minlength属性で最小の文字数を指定します。textの時に使用します。入力内容をどれだけ表示するかを指定します。textの時は、初期値が20になっています。cssの幅の指定があれば、そちらが優先されます。入力や選択ができなくなり、値も送信されなくなります。disabled><textarea>タグ複数行の入力欄です。value属性は使えません。平均的な文字幅を基準にした文字数rowsとcolsでの大きさを指定する(文字数の制限するのとは異なる)ことで、ブラウザごとのデフォルトが違っても、より一貫性を持たせやすくなります。Advertisements<select>タグセレクトボックスを作成します。<option>タグが選択肢です。送信するときに、選択したvalue属性の値が一緒に送られます。リストの複数の選択肢を選択することができます。最初に開いた時の選択状態を指定することができます。<label>タグフォームの部品と、その項目名を関連づけます。狭い画面でもタップがしやすくなります。id="username">チェックボックスなど、ほかの箇所で使うときの例はこちら↓です。value="peach">peach</option></select><button>タグボタンを作成します。送信ボタンには、cssで調整をしやすい<button>を使うことが勧められています。value="send">送信</button>まとめ特に<input>タグの中の種類は色々あるので、全ては覚えるのは難しいのですが、フォームで使われる種類は限られているので、使っていくうちに深めてゆけたらと思います。Previouswordpressで、リサイズされる画像の自動生成を停止する方法NextContinue【ドメイン移管】初心者にもできた!移管の手順&移管にかかった期間AdvertisementsManaウサギと美術館好きな、ロンドン在住のイラストレーター&デザイナーです。Webやデザインに関するアウトプットがメインです。