フォームの基本構造

HTML 授業



☆★データーでの確認★☆

お問い合せフォーム


ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>

</head>
<body>

<h1>お問い合わせフォーム</h1>


<!-- [ form ]入力フォームを表示 -->
<!-- [ action ]CGI の URL などを指定 -->

<!-- [ form action="mailto:xxx@xxx.com" ]メールアドレスがそのまま見えてしまう（文字化けの可能性がある） -->
<!-- [form action="#" enctyp="text/plain" ]をセットで記述すると文字化けを防げる -->

<!-- POST形式 … フォームのデータを本文として送信する（一度に大量のデータを送信することができる）-->
<!-- GET形式 … フォームのデータをURLの末尾に追加して送信する（送信できるデータ量には制限がある） -->
<form action="#" method="post"><!-- [ method ]（メソッド） -->


<!-- [ maxlength ]ユーザーが入力できる最大文字数を指定 -->
<p>名前:<input type="text" name="nane" size="20" maxlength="10"  value="お名前"</p>
	
  
<!-- [ cols ]文字数:入力欄の幅を文字数で指定 -->
<!-- [ rows ]行数:入力欄の高さを行数で指定 -->
<p>内容:<textarea name="subject" rows="5" cols="40">お問い合わせ</textarea></p>


<!-- [ input ]要素に[ type="submit" ]を指定すると送信ボタンを、[ type="reset" ]を指定するとリセットボタンを作成できる -->
<p><input type="submit" value="送信"</p>

</body>
</html>


ブラウザで表示