PC & スマホアプリの使い方なら

できるネットインプレスグループ創設25周年

  • Twitter をフォロー
  • Facebook ページをいいね
  • Google+ ページをフォロー
  • RSS フィードで購読
  • このサイトについて
サイト内検索

急上昇ワードiOS 10 メルカリ 神保町ペロリ旅

  • PC & スマホアプリの使い方なら | できるネット
  • サイト制作・運営
  • HTML
  • formタグの意味と使い方
  • HTML
  • サイト制作・運営

formタグの意味と使い方

16:00 2015年8月20日 公開

  • HTML5
formタグの意味と使い方

formタグ(form要素)はフォームを表し、ユーザーが情報を入力する入力欄を設置します。HTML5におけるform要素の意味と使い方、使用できる属性、サンプルコード、使用例について解説します。

  • tweet
  • このエントリーをはてなブックマークに追加
  • pocket

フォームを表す

form

< form 【 フォーム 】 属性="属性値">< /form >

form要素はフォームを表します。閲覧者が情報を入力できる入力コントロール(入力欄)となる要素を配置して、入力された情報などをサーバーに送信できます。

カテゴリー ・パルパブルコンテンツ
・フローコンテンツ
コンテンツモデル フローコンテンツ。ただし、form要素を子孫要素に持つことは不可
使用できる文脈 フローコンテンツが期待される場所
カテゴリーとコンテンツモデル

使用できる属性

accept-charset 【アクセプト・キャラクター・セット 】

フォームで送信可能な文字コードを指定します。半角スペースで区切って複数の値を指定できます。

action 【アクション 】

入力されたデータの送信先をURLで指定します。サーバー側でデータを受け取るプログラムを指定するのが一般的です。

autocomplete 【オート・コンプリート 】

オートコンプリートの可否を以下の2つの値で指定できます。

on オートコンプリートを行います(初期値)。
off オートコンプリートを行いません。

enctype 【エンコード・タイプ 】

フォームが送信するデータの形式を以下の値で指定できます。

application/x-www-form-urlencoded データはURLエンコードされて送信されます(初期値)。
multipart /form-data データはマルチパートデータとして送信されます。ファイルを送信する際に必ず指定します。
text/plain データはプレーンテキストとして送信されます。

method 【メソッド 】

データを送信する方式を以下の値で指定できます。

get 送信されるデータは、action属性で指定されたURLにクエリ文字列として付加された状態で送信されます(初期値)。
post 送信されるデータは本文として送信されます。大きなデータを送信するのに向いています。通常、サーバー側のプログラムで受け取るデータはこのpostメソッドを使用します。

name 【ネーム 】

フォームに名前を付与します。

novalidate 【ノー・ヴァリデート 】

入力データの検証可否を指定します。この属性が指定された場合、フォーム送信の際のデータ検証を行いません。novalidate属性は論理属性です。

target 【 ターゲット 】

データ送信後の応答画面を表示する対象を以下の値で指定します。

_blank 送信されるデータは、action属性で指定されたURLにクエリ文字列として付加された状態で送信されます(初期値)。
_parent リンクは現在のブラウジングコンテキストの1つ上位のブラウジングコンテキストを対象に展開されます。
_self リンクは現在のブラウジングコンテキストに展開されます。
_top リンクは現在のブラウジングコンテキストの最上位のブラウジングコンテキストを対象に展開されます。
ブラウジングコンテキスト

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

使用例キーワード検索用のフォームを作成する

<form method="get">
<input type="search"><input type="submit">
</form>

以下の例は、キーワードによる検索フォームの基本的な構造です。まず、閲覧者がキーワードを入力するための入力欄には、input要素のtype="search"を利用します。次に、入力されたキーワードをデータとして送信するためには、input要素のtype="submit"を利用します。これら2つの要素をfrom要素で内包することで、フォームを表しています。

<form method="get" action="cgi.bin/example.cgi">
  <input type="search" name="search" value="" placeholder="検索キーワードを入力">
  <input type="submit" name="submit" value="検索">
</form>

関連記事

  • form フォームを表す
  • input 入力コントロールを表示する

次の記事inputタグの意味と使い方

前の記事colタグの意味と使い方

  • HTML5
  • サイト制作・運営
  • HTML
  • Twitterでシェア
  • Facebookでシェア
  • Lineで送る

この記事が気に入ったら
いいね!しよう

できるネットから最新の記事をお届けします。

著者プロフィール

小川裕子(おがわ ゆうこ)

Webサイト制作を行うデジパ株式会社所属のマークアップエンジニア。HTML、CSSによるコーディング業務から、CMSの導入・カスタマイズまで、制作業務全般に携わる。「ディレクターからの指示がなくても、かゆいところに手が届くように」がモットー。

加藤善規(かとう よしき)

フリーランスによるWebサイト制作業務などを経て、2004年よりWebサイト制作を行うデジパ株式会社に所属。同社取締役 クリエイティブ事業部マネージャー。2014年に、Webサイトの構築・運営を支援するバーンワークス株式会社を設立、同社代表取締役に就任。個人活動としてセミナーでの講演、執筆も行う。

書籍で読みたい方はこちら

HTML5とCSS3/2.1のタグとプロパティの使い方はこの1冊でOK!

できるポケット HTML5&CSS3/2.1全事典

小川裕子・加藤善規&できるシリーズ編集部

定価:本体1,680円+税

インプレスの商品ページを見る

Amazonで購入

楽天ブックスで購入

オススメの記事一覧
同じカテゴリーの記事一覧
  • 複数ページのタイトルとURLを一発取得! Chromeの必須アドオン「GetTabInfo」
  • HTML入門 - 書き方、グローバル属性、関連仕様まとめ
  • HTMLタグ一覧
  • dialogタグの意味と使い方
  • menuitemタグの意味と使い方
カテゴリーで使い方を探す
カテゴリーで使い方を探す
  • トップページ
  • Apple/Mac/iOS
    • iPhone最近アップデートされたカテゴリー
    • Apple Music
    • Apple Watch
    • iPad
    • iPod touch
    • Apple TV
    • iMovie
    • iPhoto
    • Mac
    • iTunes
    • その他(Apple)
  • Windows/Office
    • Windows 10最近アップデートされたカテゴリー
    • Word
    • Excel最近アップデートされたカテゴリー
    • Excel関数最近アップデートされたカテゴリー
    • PowerPoint
    • Access最近アップデートされたカテゴリー
    • OneNote
    • OneDrive
    • Office
    • Windows 8.1/8
    • Windows 7
    • XPサポート終了
    • その他(Windows/Office)
  • サービス/ソフト
    • Minecraft(マインクラフト)最近新しい記事が追加されたカテゴリー
    • プログラミング
    • YouTube
    • Facebook
    • Instagram(インスタグラム)
    • Pokémon GO(ポケモンGO)
    • Amazon
    • LINE
    • giftel(ギフテル)
    • Spotify(スポティファイ)
    • Webサイト/Webサービス
    • 動画配信サービス
    • Dropbox
    • Evernote
    • ショートカットキー
    • note(note.mu)
    • PDF
    • GANREF
    • クラウド
    • Firefox
    • iKnow!
    • Rosetta Stone
    • RSSリーダー
    • Twitter
    • Ustream
    • 検索
    • サイボウズLive
    • セカンドライフ
    • 年賀状
    • はてなブックマーク
    • ブログパーツ
    • 今週の小ワザ
    • その他(サービス/ソフト)
  • Google
    • Android最近アップデートされたカテゴリー
    • Google Playミュージック
    • Googleフォト
    • Googleカレンダー
    • Chrome
    • Inbox by Gmail
    • Ingress(イングレス)
    • Gmail
    • Googleマップ
    • Googleドライブ
    • Google検索
    • その他(Google)
  • サイト制作・運営
    • Webマーケティング最近新しい記事が追加されたカテゴリー
    • ヒートマップツール
    • HTML
    • CSS
    • WordPress(ワードプレス)
    • Googleアナリティクス
    • Googleタグマネージャ
    • Google AdSense
  • デバイス
    • HOME ALSOK
    • ホームセキュリティ最近新しい記事が追加されたカテゴリー
    • スマートスピーカー
    • Amazon Echo
    • 子供GPS
    • まもるっく
    • 格安スマホ、格安SIM
    • GoPro
    • dynabook
    • Chromecast
    • USBメモリー
    • Touch Diamond
    • Pocket WiFi
    • BlackBerry
    • VAIO最近アップデートされたカテゴリー
    • ミニノートPC
    • その他(デバイス)
  • Android
    • GALAXY
    • LG(G2、Optimus)
    • MEDIAS
    • LifeTouch NOTE
    • Sony Tablet S
    • Androidアプリ・活用術
    • その他(Android)
  • 通信事業者
    • NTTドコモ
    • au
    • ソフトバンク
  • 読み物
    • マネー
    • マインドフルネス
    • 神保町ペロリ旅
    • 編集部からのお知らせ
    • できるもんの部屋
    • インタビュー
    • トピック
    • まとめ
    • その他(読み物)
人気記事
  1. Excel関数一覧 機能別
  2. 【知ってた?】スマホで「この画像と似た画像」を検索する方法(Google画像検索)
  3. Googleの軽くてかわいいアプリ「Files Go」でスマホのストレージとファイルを管理しよう【Androidアプリ】
  4. 【エクセル時短】今さら聞けない「VLOOKUP」。複雑な「4つの引数」を理解する
  5. 【Google裏ワザ】「斜め」「一回転」など、スマホで楽しめる検索隠し機能「5選」
Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
新着記事
  • PowerPointでスライドの中心に図形を配置する方法
  • 米Amazonの商品が日本で買える新機能「インターナショナルショッピング」の使い方:Amazon.comのアカウントを作る
  • PowerPointで作った図形を画像として保存する方法
  • もう試した? Googleの新感覚Androidアプリ 【2018年4月20日】
  • PowerPointで複数の図形をグループ化する方法

Twitterで @dekirunet をフォローする フォローする @dekirunet

ページ上部へ

Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
フォロー
  • RSSフィードで購読
  • Twitterでフォロー
  • Facebookでフォロー
できるシリーズ
  • できるシリーズについて
  • 読者限定PDFのダウンロード
  • サンプルファイルのダウンロード
できるネット
  • このサイトについて
  • 本サイトのご利用について
  • 全記事一覧
  • プライバシーについて
  • 会社概要
  • インプレスグループ
インプレスの本、雑誌と関連Webサービス
  • DOS/V POWER REPORT
  • GANREF
  • できるネット
  • 年賀状Web
  • Web徹底攻略
  • Reader's Forum
  • インプレス

Copyright © Impress Corporation. All rights reserved.