HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

HTMLのフォームの基礎知識1

HTMLで記述できるフォームとはなんでしょうか?

  • ブラウザの操作画面で、ユーザーの情報を受け付けるもの
  • 目的は、ユーザーの情報を集めるため

 

action

action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。

 

お問い合せフォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<p>名前:<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>内容:<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

 

ラジオボタン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<form action="#" method="post">
<p>性別:
  <input type="radio" name="sex" value="male" checked>男性
  <input type="radio" name="sex" value="female">女性
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

 

チェックボックス
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックボックス</title>
</head>
<body>
<h1>チェックボックス</h1>
<form action="#" method="post">
<p>スマートフォン:
  <input type="checkbox" name="mobile" value="1" checked>iPhone
  <input type="checkbox" name="mobile" value="2">Android
  <input type="checkbox" name="mobile" value="3">その他
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

 

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