【HTML】属性まとめ

はじめに

バックエンドを開発している時に、ふと気になったので調べてみる！
inputタグとかつける属性多くて、、、
後で見返す用にもなると便利！

当記事の対象

• 初心者の中でもHTMLをちょっとでもやったことある人。
• HTMLのタグをある程度理解している人。

HTMLの属性とは？

タグに対する追加設定です。
htmlタグは単体ではなく属性とその値とセットで使うことがあります。
「値」はその具体的な指定内容です。
文章引用

例

<h1 class="top" id="title"></h1>

上記の場合、classとidが属性となり、topとtitleが値になる。

ルール
1.初めにhtmlタグを指定する
2.属性の前に半角スペースをいれる
3.属性と値は「=」イコールで結ぶ
4.値は「"」ダブルクオートで囲う
5.違う属性であれば複数指定可能（順不同）
6.htmlごとに指定できる属性が決められている
7.属性ごとに指定できる値が決められている

すべてのHTMLタグで使える！

• id
  • cssやjsを指定するための名前。任意の値。
• class
  • cssやjsを指定するための名前。任意の値。
• style
  • cssを直接指定。cssの値。
• translate
  • コンテンツを翻訳するのを防ぐ。値はnoを指定。
• hidden
  • 要素の非表示。値なし可。

aタグ

• href
  • リンク先のURLを指定。
• target
  • _brankを指定。別タブで開く。

imgタグ

• src
  • 画像の表示。画像ファイルのURLを指定。
• alt
  • 画像の説明。任意。
• width
  • 画像の幅。
• height
  • 画像の高さ。

tableタグ

• border
  • テーブルの線を示す

td、thタグ

• colspan

  • 横結合。

• rowspan

  • 縦結合。

inputタグ

• type
  • 入力の形式などを指定できる。値の種類が多く、今回は省略。ex.text、radio、checkbox、submit
• name
  • 項目グループに名前をつける。任意の値。
• value
  • 入力内容を全角で送る。
• placeholder
  • 入力欄に文字を表示
• required
  • 入力必須にする。値なし可。
• readonly
  • 入力不可。読み専用。値なし可。
• multiple
  • 複数の値を入力できる。
• accept
  • アップロードできるファイルの拡張子を指定。
• autofocus
  • ページのロード時にフォーカスを当てる。値なし可。
• inputmode
  • ユーザーが入力するデータの種類を示唆。スマホ向け。値はemail、url、numeric

labelタグ

• for
  • inputタグと結びつける

formタグ

• action
  • 送信先ファイルのパスを指定。
• method
  • 送信方法を指定。ex.GET、POST

その他タグ

• disabled
  • formタグ内の要素タグで使用
    • 入力要素を無効にする。
• selected
  • optionタグ内で使用
    • 初期選択状態にする。値なし可。

参考資料

まとめ

他にもタグに対する属性はあります。
（多くて大変ですよね・・・）
私が使用してきた中で良く使うものや、調べていて便利そうだな～というのをまとめました。
バックエンドで制限していたものをHTMLでも制限できるのはいいですよね。
今後のアップデートに期待です！！