HTMLで問い合わせフォームを作る勉強 - HTMLの勉強|Webサイト作りの基礎

今回は、HTMLで問い合わせフォームを作る勉強をしましょう。

フォームは、利用者の情報を収集するために作られるものです。

資料の請求をしてもらったり、サービスに対する質問をしてもらったり。

ホームページには必須のものです。

完璧な問い合わせフォームを作るには、PHPが必要になりますが、一旦はHTMLで書けるところまでを紹介します。

お問い合わせフォーム

※actionには、PHPを入力する必要があるので、一旦、NULLを入れています。

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<formaction="#"method="post">
<p>名前：<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p>
<p>内容：<textareaname="subject"rows="5"cols="40">お問い合せ内容</textarea></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ラジオボタン

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<formaction="#"method="post">
<p>性別：
  <inputtype="radio"name="sex"value="male"checked>男性
  <inputtype="radio"name="sex"value="female">女性
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ラジオボタン

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<formaction="#"method="post">
<p>言語：
<selectname="language">
  <optionvalue=""selected>以下の言語を選択してください</option>
  <optionvalue="1">日本語</option>
  <optionvalue="2">英語</option>
  <optionvalue="3">フランス語</option>
  <optionvalue="4">スペイン語</option>
  <optionvalue="5">韓国語</option>
</select>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>