2016.09.14Webサイトを運営していれば、アンケートや問い合わせを受け付けたいときが多々あります。そこで登場するのがHTMLの「フォーム」という機能です。WordPressでは簡単にお問い合わせフォームを作成できるプラグインがあります。Web初心者でも簡単にブログを始められる、WordPressならではの機能です。サイトが大きくなってくると、プラグインの機能だけでは物足りなく感じます。オリジナルのフォームを作ろうとすると、CGIなどのプログラムが必要で難しいですが、フォームがどんな要素で出来ているかを知ることで、ちょっとしたアレンジは可能です。いうことで、今回はフォームを構成する要素を見ていきたいと思います。はじめにHTMLの勉強をしてからのほうが、理解しやすいかもしれません。HTMLを独学で学ぶ!web専門学校で学んだHTMLの基本まとめここではweb専門学校で最初に学んだ、HTMLの基本知識をまとめます。独学でホームページ作りを考えている人や、自分のブログをカスタマイズしたいという人向けに紹介していきます。HTMLを理解することがホームページ作りの第一歩です。coonelnel.net2016.09.07目次フォームの基本要素「formタグ」action属性method属性フォームの入力欄を作るためのタグinputタグselect、optionタグtextareaタグ最後にスポンサーリンクフォームの基本要素「formタグ」フォームはこのタグで囲まれています。<form>~</form>実際にフォームに入力したデータを送信するには、フォームタグにデータをどう処理するかを書きこむ必要があります。次はそれを見ていきます。action属性action=”送信先のプログラムまたはメールアドレス”アクション属性は、入力されたデータをどこに送信するかを表しています。送信先のプログラムまたはメールアドレス”>~</form>method属性method=”getまたはpost”メソッド属性は入力されたデータの送信形式を表しています。getは送信サイズが小さいとき(検索キーワードなど)に使われ、postは送信サイズが大きいとき(アンケートなど)に使います。お問い合わせフォームはpostを使います。method=”getまたはpost”>~</form>これがフォームの大枠となります。action属性とmethod属性はデータを確実に送信できるように、必ず記述する必要があります。フォームの入力欄を作るためのタグ次は実際にフォーム中にいくつも登場する入力欄を作るタグを見ていきます。名前を入力する欄や、選択肢からチェックするものなど色々な種類があります。○の部分にこれから紹介する値を入れることで、色々な形の入力欄を作ることが出来ます。type=”○”>text文字列の入力が出来ます。氏名や住所の入力欄に使います。type=”text”>passwordパスワードの入力欄に使われます。近くの人に入力した文字が分からないように、文字が●などに置き換わります。value=”選択肢の名前”>radio1つしか選択できない選択肢を作る時に使います。value=”選択肢の名前”>submit送信ボタンを表示します。type=”submit”>image好きな画像で送信ボタンを表示します。送信されてきた時、何のデータなのかわかるように名前を付けておきます。nameをつけておかないと、入力されたデータしか送られてきません。例)メールに送信されてきたときに、入力したデータが氏名だということが分かるようにカテゴリーを付けました。各入力欄の初期値を入力します。チェックボックスとラジオボタンには必ず付けます。value=”選択肢の名前”>select、optionタグプルダウンメニューを表示します。cols=”文字数”>~</textarea>1行以上の文字列を入力できるテキストエリアを表示します。最後にwebサイトでよく見かけるお問い合わせフォームは、ほとんどこれらのタグで構成されています。実際フォームを作る時は、見やすいようにテーブルを作って、その中にフォームを構成するタグを埋め込むことが多いです。web制作HTMLTwitterFacebookはてブPocketLINE今村りょうCooNelNelスポンサーリンクスポンサーリンクスポンサーリンクスポンサーリンクプロフィール今村りょう料理が好きな家飲みブロガーです。お店ではなく、家でゆったり飲む「家飲み」の情報を発信中。みの牛すじカレー!お取り寄せレトルトカレーの魅力2020.02.10活きたうなぎを捌いて「蒲焼き」と「白焼き」を作ってみた2020.01.23民芸コンロを使ってちょっと贅沢な家飲みを!卓上七輪としても使えます2020.01.19焼き鳥との相性97%以上の日本酒「純米吟醸94(きゅうじゅうよん)」で家飲み!2020.01.13熊本馬刺しは熊本産じゃない!?「純熊本産馬刺し」は全国流通たったの1%2019.12.18ポテトサラダにクリームチーズを加えて居酒屋風ポテサラを作る!2019.11.29きびなごの刺身の漁師漬けが酒のつまみとして最高な件2019.11.21プロフィール今村りょう料理が好きな家飲みブロガーです。お店ではなく、家でゆったり飲む「家飲み」の情報を発信中。普段は在宅でwebのお仕事してます!包丁に関する知識や、家で魚を捌いて食べる楽しさを発信する「包丁日記」も運営中。CooNelNel.。