ＨＴＭＬ－フォーム－　　－ＨＴＭＬの基礎

フォーム

■フォームの作成

ここではフォームの作成方法を説明しています。フォームとは、文章を入力する欄や項目を選択したりする際に使うチェックボックスの事です。
このページに掲載しているタグは以下の通りです。

<form>　フォームの作成
<input～>　入力欄・ラジオボタン・チェックボックスの作成
<textarea>　複数行の入力欄
<select～>　選択メニューの作成
<optgroup>　選択メニューのグループ化
<fieldset>　入力項目のグループ化
<button～>　ボタンの作成
<form～>　入力内容を電子メールで送信する

使用例
<form>入力欄・ラジオボックス・ボタンなど・・</form>

<form></form>で、入力欄やチェックボックス・ラジオボタンなどのフォームを作成する事が出来ます。

PAGETOP

■入力欄・ラジオボタン・チェックボックスの作成　<input～>

●入力欄を作成する●

使用例
<input type="値" size="値" value="値" maxlength="値" name="値">

属性	属性の値	解説
type	text password	入力タイプがテキスト入力タイプがパスワード
size	数字	入力欄の幅
value	文字列	入力欄の初期値
maxlength	数字	入力可能な文字数
name	任意の文字列	変数名

type属性でpasswordを指定した場合、
入力した文字が*などに置き換えて表示されます。

　　●ラジオボタン・チェックボックスを作成する●

使用例
<input type="値" value="値" name="値" checked>後に続く文字列

属性	属性の値	解説
type	radio checkbox	ラジオボタンチェックボックス
value	name属性で指定した変数に入力する値	変数に入力する値
name	選択項目のグループに割り当てる変数名	文字列
checked	選択	項目があらかじめ選択された状態になる

ラジオボタンはグループから１つの項目を選択するボタン。
チェックボックスはグループから複数の項目を選択するボックス。

選択項目のグループに割り当てるname属性では、
変数名を同じものにしておく必要があります。

checked属性を指定された項目は、はじめから選択された状態で表示されます。

　　●リセットボタンを作成する●

使用例
<input type="reset" value="ボタン名">

<input></input>のtype属性にresetを設定すると、リセットボタンを作成することが出来ます。
リセットボタンでそのページに入力したデータを消去する事ができます。

value属性でボタン名を指定すると、リセットボタンに名前を付ける事ができます。
指定しない場合は「reset」「リセット」などのボタン名が自動的に表示されます。

　　●送信ボタンを作成する●

使用例
<input type="submit" value="ボタン名">

<input></input>のtype属性にsubmitを設定すると、
送信ボタンを作成することが出来ます。
送信ボタンでそのページに入力したデータを送信する事ができます。
ただし、あらかじめ<form～>のaction属性やmethod属性で送信方法などを設定しておかなければなりません。

value属性でボタン名を指定すると、送信ボタンに名前を付ける事ができます。
指定しない場合は「submit」「クエリー送信」などのボタン名が自動的に表示されます。

PAGETOP

■複数行の入力欄　<textarea>

使用例
<textarea name="値" rows="値" cols="値"> 文字列</textarea>

属性	属性の値	解説
name	変数名	文字列
rows	行数	入力フォームの行数
cols	桁数	入力フォームの桁数

<textarea></textarea>で入力フォームを作成することが出来ます。

フォームの行数はrows属性で、桁数はcols属性で、設定します。そのとき入力する数字は半角で指定して下さい。
<textarea></textarea>の間に記入された文字列は、フォームに初期値として表示されます。別に記入しなくても良いです。

PAGETOP

■選択メニューの作成　<select～>

使用例
<select name="値"> <option value="値" selected>選択肢 </select>

属性	属性の値	解説
name	変数名	文字列
value	変数の値	変数に入力される値
selected	初期値	最初に表示される値

<select></select>で、プルダウン式選択メニューを作成することができます。

プルダウンして表示される項目は、<option>で指定します。
<option>に、selected属性を指定すると、その指定された<option>の値が初期値として表示されます。指定しない場合は、一番最初に記述した<option> の値が初期値となります。

PAGETOP

■選択メニューのグループ化　<optgroup>

使用例
<optgroup label="値"> <option label="値">項目名</option> </optgroup>

属性	属性の値	解説
label(optgroup)	グループ名	選択する項目のグループの名前
label(option)	項目名	グループ内の選択項目名

<optgroup></optgroup>、<option></option> を利用すると、選択項目をグループ化して表示することができます。

グループ化した項目の表示は使用しているブラウザによって、スタイルが違います。

PAGETOP

■入力項目のグループ化　<fieldset>

使用例
<fieldset> <legend>グループ化した入力項目の名前</legend> </fieldset>

<fieldset></fieldset>を利用すると、入力フォームや、ボタンなどのいくつかの項目をグループ化することができ、 <legend></legend>を利用すると、グループ化したフォームなどに名前を付けることができます。

PAGETOP

■ボタンの作成　<button>

使用例
<button type="値">ボタン名</button>

属性	属性の値	解説
type	submit reset button	送信リセットボタン

type属性の値である"button"は、Javascriptなどを使用するボタンを作成する際に使用します。

この、<button></button>は、間に設定したボタン名の書式を設定したり、画像入りのボタンを作成する際に使用します。
画像を入れる時は、<button></button>の間に画像表示のタグを配置してください。

PAGETOP

■入力内容を電子メールで送信する　<form～>

使用例
<form action="mailto:電子メールアドレス" method="値"> enctype="text/plain"> フォームの内容 </form>

属性	属性の値	解説
method	post get	mailtoを利用するので postを利用

<form></form>のaction属性で、mailto:の後に宛先である電子メールアドレスを指定して下さい。

PAGETOP

メール

質問メールがとても多くなった為、現在返信が遅れております。お返事が出来ていないものも沢山あり、今のところいつになるのか・必ず返信出来るのかどうかの保証が出来ません。申し訳ございませんが、その事をご理解いただいた上でご送信下さい。また、ここではHTMLの質問に関してのみ受け付けております。

メールはこちらから：ykrmain★★★eay.jp

PAGETOP

Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★

　Webページ作成の為のＨＴＭＬを解説しています。★本サイトにはプロモーションが含まれています★