メールフォーム作成<form action="mailto:Ｅメールアドレス" method="post" enctype="送信方法">〜</form> |
| こちらのタグはメールを使用してフォームの内容を送信するときに指定します。 Ｅメールアドレスサンプル： ｗｅｂｍａｓｔｅｒ＠ｅｘｐｉｅｃｅ.ｃｏｍ 送信方法サンプル： application/x-www-form-urlencoded これは省略するとこちらの設定になります。このままでは内容が変換されていますので、 再変換するツールが必要です。 text/plain, multipart/form-data こちらは再変換する必要が無くそのまま読むことができます。 ブラウザによってはご利用になれません。 下記のように挟んで記述します。 記述例 <form action="mailto:ｗｅｂｍａｓｔｅｒ＠ｅｘｐｉｅｃｅ.ｃｏｍ" method="post" enctype="text/plain"> <p> <textarea name="sampletext" rows="5" cols="40"></textarea> </p> <p> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"> </p> <p> <input type="submit" value="送信"> <input type="reset" value="消去"> </p> </form> 実際の表示 |
| ▲ページトップへ |
送信ボタン作成その１<input type="submit" name="ボタン名" value="ラベル名"> |
| こちらのタグは入力フォームやメールフォームで送信ボタンを作成し使用します。 ボタン名では受信する側で判別する為の値を入力します。 ラベル名ではボタンに実際表示するテキストを入力します。 記述例 <form action="mailto:ｗｅｂｍａｓｔｅｒ＠ｅｘｐｉｅｃｅ.ｃｏｍ" method="post" enctype="text/plain"> <p> 送信ボタンサンプルその１<br><br> <input type="submit" name="yes!" value="送信"><br><br> <input type="submit" name="yesyes!"value="送信！！"> </p> </form> 実際の表示 |
| ▲ページトップへ |
送信ボタン作成その２<input type="image" src="画像ファイル名" name="ボタン名" alt="代替テキスト" align="テキスト配置場所"> |
| こちらのタグは入力フォームやメールフォームで送信ボタンを作成し使用します。 画像ファイル名では使用する画像ファイル名を入力します。 ボタン名では受信する側で判別する為の値を入力します。 代替テキストでは画像ファイルが表示されない時の代わりに表示するテキストを入力します。 テキスト配置場所サンプル： top, middle, bottom, left, right 記述例 <form action="sample.cgi" method="post"> <p> 送信ボタンサンプルその２<br><br> <input type="image" src="extraffic.gif" alt="送信する" name="submit"><br><br> </p> </form> 実際の表示 |
| ▲ページトップへ |
リセットボタン作成<input type="reset" value="ラベル名"> |
| こちらのタグは入力フォームやメールフォームでリセットボタンを作成し使用します。 ラベル名では実際表示するテキストを入力します。 記述例 <form action="mailto:ｗｅｂｍａｓｔｅｒ＠ｅｘｐｉｅｃｅ.ｃｏｍ" method="post" enctype="text/plain"> <p> リセットボタンサンプル<br><br> <input type="reset" value="リセット"><br><br> <input type="reset" value="やり直し"> </p> </form> 実際の表示 |
| ▲ページトップへ |
凡用ボタン作成<button type="ボタンの種類" name="ボタン名" value="ボタン名">〜</button> |
| こちらのタグは入力フォームやメールフォームで凡用ボタンを作成し使用します。 ボタンの種類サンプル： submit, reset, button ボタン名では受信する側で判別する為の値を入力します。 下記のように挟んで記述します。 記述例 <form action="mailto:ｗｅｂｍａｓｔｅｒ＠ｅｘｐｉｅｃｅ.ｃｏｍ" method="post" enctype="text/plain"> <p> 色々なボタン作成できます<br><br> </p> <p> <button type="button" name="img_button" value="img_button"> <img src="extraffic.gif" width="60" height="30" alt="エクストラフィック"><br> <font size="2">エクストラフィック</font> </button> </p> <p> <button type="submit" name="submit" value="submit"> <font size="3">送信いたします</font> </button> <button type="reset" name="reset"value="reset"> <font size="6">消去します</font> </button> </p> </form> 実際の表示 |
| ▲ページトップへ |
テキスト入力フィールド作成その１<input type="入力タイプ" name="ラベル名" size="文字数" value="表示テキスト" maxlength="最大文字数"> |
| こちらのタグは入力フォームやメールフォームで１行のテキストフィールドを作成し使用します。 入力タイプサンプル： text, password textとは通常使用するタイプです。 passwordとは入力した時に「＊」や「●」で表示されるタイプになります。 ラベル名には送信されたデータを解読する名前を入力します。 文字数には表示する幅を文字数で入力します。 表示テキストには最初から表示させる時に入力します。 最大文字数には入力できる最大の文字数を入力します。 下記のように記述します。 記述例 <form action="sample.cgi" method="post"> <p> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="登録"> <input type="reset" value="消去"> </p> </form> 実際の表示 |
| ▲ページトップへ |
テキスト入力フィールド作成その２<textarea name="ラベル名" cols="幅" rows="高さ" wrap="改行方法">〜</textarea> |
| こちらのタグは入力フォームやメールフォームでテキストフィールドを作成し使用します。 <textarea></textarea>の間にテキストを入力しておけば最初から表示できます。 ラベル名には送信されたデータを解読する名前を入力します。 幅には半角文字数で入力します。 高さには行数で入力します。 改行方法サンプル： soft, hard, off softとは画面上では改行しているがデータには改行しないようにできます。 hardとは画面上での改行がデータにも反映されるようにできます。 offとは改行されないようにできます。 下記のように記述します。 記述例 <p>エクストラフィック質問箱</p> <form action="sample.cgi" method="post"> <p> <textarea name="sample" cols="40" rows="5"> こちらに質問などを入力してください。 </textarea> </p> <p> <input type="submit" value="送信する"> <input type="reset" value="消去"> </p> </form> 実際の表示 エクストラフィック質問箱 |
| ▲ページトップへ |
隠しフィールドを作成<input type="hidden" name="ラベル名" value="送信テキスト"> |
| こちらのタグは入力フォームやメールフォームに隠してテキスト送信する時に作成し使用します。 ラベル名には送信されたデータを解読する名前を入力します。 送信テキストには送信するテキストを入力します。 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p> <input type="hidden" name="kensho" value="kensho_no12"> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
ラジオボタン作成<input type="radio" name="ラベル名" value="送信テキスト"> |
| こちらのタグは入力フォームやメールフォームに選択肢を作成し使用します。 この選択肢はその中から一つだけ選ぶときに使用します。 ラベル名には送信されたデータを解読する名前を入力します。 送信テキストには送信するテキストを入力します。 最初からチェックをしたい項目があるならば <input type="radio" checked>と記述します。 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p>職業はなに？</p> <p> <input type="radio" name="serect" value="business" checked>社会人<br> <input type="radio" name="serect" value="univ">大学生<br> <input type="radio" name="serect" value="highs">高校生<br> <input type="radio" name="serect" value="j_high">中学生<br> <input type="radio" name="serect" value="other">その他<br> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
チェックボタン作成<input type="checkbox" name="ラベル名" value="送信テキスト"> |
| こちらのタグは入力フォームやメールフォームに選択肢を作成し使用します。 この選択肢はその中から複数選ぶときに使用します。 ラベル名には送信されたデータを解読する名前を入力します。 送信テキストには送信するテキストを入力します。 最初からチェックをしたい項目があるならば <input type="checkbox" checked>と記述します。 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p>職業はなに？<br> 複数回答できます</p> <p> <input type="checkbox" name="serect" value="eigyo">営業職<br> <input type="checkbox" name="serect" value="jimu">事務職<br> <input type="checkbox" name="serect" value="koumu">公務員<br> <input type="checkbox" name="serect" value="seizou">製造業<br> <input type="checkbox" name="serect" value="sabisu">サービス業<br> <input type="checkbox" name="serect" value="jiei">自営業<br> <input type="checkbox" name="serect" value="kabusiki" checked>株式会社<br> <input type="checkbox" name="serect" value="yuugen">有限会社<br> <input type="checkbox" name="serect" value="other">その他<br> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
プルダウンメニュー作成その１<select name="メニュー名"><option value="送信テキスト">〜</option></select> |
| こちらのタグは入力フォームやメールフォームにプルダウンメニューを作成し使用します。 このプルダウンメニューはその中から一つだけ選ぶときに使用します。 メニュー名には送信されたデータを解読する名前をメニューに入力します。 送信テキストには送信するテキストを入力します。 最初からチェックをしたい項目があるならば <option selected>と記述します。 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p>職業はなに？<br> <p> <select name="shokugyo"> <option value="eigyo">営業職</option> <option value="jimu">事務職</option> <option value="koumu">公務員</option> <option value="seizo">製造業</option> <option value="sabisu">サービス業</option> <option value="jiei">自営業</option> <option value="kabu" selected>株式会社</option> <option value="yuugen">有限会社</option> <option value="other">その他</option> </select><br> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
プルダウンメニュー作成その２<optgroup label="グループ名"><option label="ラベル名">〜</option></optgroup> |
| こちらのタグは入力フォームやメールフォームにメニューリストを作成し使用します。 グループ名には送信されたデータを解読する名前を入力します。 ラベル名には送信するテキストを入力します。 複数選択をしたいならば 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p>職業はなに？<br> <p> <select name="shokugyo" multiple> <optgroup label="職業"> <option label="eigyo">営業職</option> <option label="jimu">事務職</option> <option label="koumu">公務員</option> <option label="seizo">製造業</option> <option label="sabisu">サービス業</option> <option value="other">その他</option> </optgruop> <optgroup label="会社種類"> <option value="jiei">自営業</option> <option value="kabu">株式会社</option> <option value="yuugen">有限会社</option> <option value="other">その他</option> </optgroup> </select>,<br> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
リストボックス作成<select name="メニュー名" size="行数"><option value="送信テキスト">〜</option></select> |
| こちらのタグは入力フォームやメールフォームにリストボックスを作成し使用します。 メニュー名には送信されたデータを解読する名前をメニューに入力します。 行数には表示する行数を入力します。 送信テキストには送信するテキストを入力します。 複数選択をしたいならば <select multiple>と記述します。 最初からチェックをしたい項目があるならば <option selected>と記述します。 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p>職業はなに？<br> <p> <select name="shokugyo" size="4" multiple> <option value="eigyo">営業職</option> <option value="jimu">事務職</option> <option value="koumu">公務員</option> <option value="seizo">製造業</option> <option value="sabisu">サービス業</option> <option value="jiei">自営業</option> <option value="kabu" selected>株式会社</option> <option value="yuugen">有限会社</option> <option value="other">その他</option> </select><br> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
入力フォームグループ化<fieldset><legend align="場所指定">〜</legend></fieldset> |
| こちらのタグは入力フォームやメールフォームをグループ分けするのに使用します。 グループ化する入力フォームは<fieldset>タグで挟みます。 場所指定には<legend>タグで挟まれたグループ名の場所を指定します。 場所指定サンプル： top, bottom, left, right 下記のように記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <fieldset> <legend>アンケート入力欄</legend> <textarea name="sample" cols="40" rows="5"> こちらに応募理由を入力してください。 </textarea> <br><br> <p>職業選択してください</p> <select name="shokugyo" size="4" multiple> <option value="eigyo">営業職</option> <option value="jimu">事務職</option> <option value="koumu">公務員</option> <option value="seizo">製造業</option> <option value="sabisu">サービス業</option> <option value="jiei">自営業</option> <option value="kabu" selected>株式会社</option> <option value="yuugen">有限会社</option> <option value="other">その他</option> </select></fieldset> <fieldset> <legend>情報入力欄</legend> 電話番号：<input type="text" name="telnum" value="TEL:"><br> 氏名：<input type="text" name="name"><br> パスワード：<input type="password" name="pass" size="6"> </fieldset> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
入力部品にラベルを付ける<label for="ＩＤ">〜</label> |
| こちらのタグは入力フォームやメールフォームにラベル作成し使用します。 ラベルを作成しますと例えばラジオボタンの場合はボタン部分だけでなく、 その関連したテキスト部もクリックするとチェックされるようになります。 ブラウザによって使用できない場合がございます。 二種類の使用方法があります。 まずひとつ目はfor="ＩＤ"を削除して使用する方法です。 こちらは<label>タグにラベルを付けたい部分を挟んで記述するだけです。 もうひとつはfor="ＩＤ"を付けて使用する方法です。 <label>タグにはテキストのみを挟んで使用します。 ＩＤには関連付けたい項目に個別の物を付けます。 そしてラベルを付けたい入力部品にはid="ＩＤ"を追加します。 下記のように挟んで記述します。 記述例 <p>懸賞に応募されるときには下記に入力してください</p> <form action="sample.cgi" method="post"> <p>職業はなに？</p> <p> <input type="radio" name="serect" value="business" id="business"><label for="business">社会人</label><br> <input type="radio" name="serect" value="univ" id="univ"><label for="univ">大学生</label><br> <input type="radio" name="serect" value="highs" id="highs"><label for="highs">高校生</label><br> <input type="radio" name="serect" value="j_high" id="j_high"><label for="j_high">中学生</label><br> <input type="radio" name="serect" value="other" id="other"><label for="other">その他</label><br> <label>電話番号：<input type="text" name="telnum" value="TEL:"></label><br> <label>氏名：<input type="text" name="name"></label><br> <label>パスワード：<input type="password" name="pass" size="6"></label> </p> <p> <input type="submit" value="応募する"> <input type="reset" value="やり直し"> </p> </form> 実際の表示 懸賞に応募されるときには下記に入力してください |
| ▲ページトップへ |
