フォームを作成するには、<form>タグを使用します。
　<form>〜</form>の間には、さまざまなフォーム部品を配置させます。

　テキストフォームを作成するには、<input>タグにtype属性にtextを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="text" name="MAJI"> </form>
　ブラウザにはこのように表示されます。

　パスワードフォームを作成するには、<input>タグにtype属性にpasswordを指定します。
　パスワードフォームに書いた文字は、*(アスタリスク)で表示されます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="password" name="MAJI"> </form>
　ブラウザにはこのように表示されます。

　メールフォームを作成するには、<form>タグにaction属性にmailto:を指定します。
　mailto:〜の〜には送信先のメールアドレスを記述してください。
　method属性のpostはフォームのデータを、getはフォームのデータとURLを送信します。
　enctype属性には、送信時のMIMEタイプを記述します。
　name属性には、そのフォームの名前を記述します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form method="post" enctype="multipart/form-data" name="MAJI" action="mailto:info@majideka.com"> 名前：<input type="text" name="NAME"><br> メールアドレス：<input type="text" name="MAILADDRESS"><br> <input type="submit" value="送信"> <input type="reset" value="取消"> </form>
　ブラウザにはこのように表示されます。

　テキストエリアを作成するには、<textarea>〜</textarea>の〜に初期値を記述します。
　cols属性は横幅を、rows属性は高さを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <textarea name="MAJIDEKA" cols="30" rows="5"></textarea> </form>
　ブラウザにはこのように表示されます。

　ラジオボタンを作成するには、<input>タグにtype属性にradioを指定します。
　１つのみを選択させるために、name属性で同じ値を記述してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="radio" name="MAJI">MAJIDEKA <input type="radio" name="MAJI">MAJIDEYO <input type="radio" name="MAJI">MAJINOSUKE </form>
　ブラウザにはこのように表示されます。

　テキストクリックでラジオボタンをチェックするには、<label>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="radio" value="MAJIDEKA" name="MAJI" id="r1"> <label accesskey="K" for="r1">MAJIDEKA(<u>K</u>)</label> <input type="radio" value="MAJIDEYO" name="MAJI" id="r2"> <label accesskey="Y" for="r2">MAJIDEYO(<u>Y</u>)</label> <input type="radio" value="MAJINOSUKE" name="MAJI" id="r3"> <label accesskey="S" for="r3">MAJINOSUKE(<u>S</u>)</label> </form>
　ブラウザにはこのように表示されます。

　チェックボックスを作成するには、<input>タグにtype属性にcheckboxを指定します。
　１つのグループとして選択させるためには、name属性で同じ値を記述してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="checkbox" name="MAJI">MAJIDEKA <input type="checkbox" name="MAJI">MAJIDEYO <input type="checkbox" name="MAJI">MAJINOSUKE </form>
　ブラウザにはこのように表示されます。

　セレクトボックスを作成するには、<select>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <select> <option value="MAJIDEKA">MAJIDEKA <option value="MAJIDEYO">MAJIDEYO <option value="MAJINOSUKE">MAJINOSUKE </select> </form>
　ブラウザにはこのように表示されます。

　セレクトボックスの内容をグループ化するには、<optgroup>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <select> <optgroup label="ALPHABET"> <option value="MAJIDEKA">MAJIDEKA <option value="MAJIDEYO">MAJIDEYO <option value="MAJINOSUKE">MAJINOSUKE </optgroup> <optgroup label="ひらがな"> <option value="まじでか">まじでか <option value="まじでよ">まじでよ <option value="まじのすけ">まじのすけ </optgroup> <optgroup label="カタカナ"> <option value="マジデカ">マジデカ <option value="マジデヨ">マジデヨ <option value="マジノスケ">マジノスケ </optgroup> </select> </form>
　ブラウザにはこのように表示されます。

　送信・取消ボタンを作成するには、<input>タグにtype属性にsubmitを指定します。
　submitは送信ボタンで、フォームに入力した内容を<form>タグのaction属性で指定した送信先へ送信します。
　resetは取消ボタンで、フォームに入力した内容を取り消して初期状態に戻します。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form method="post" action="xxx.cgi"> メールアドレス：<input type="text" name="MAILADDRESS"><br> パスワード：<input type="text" name="PASSWORD"><br> <input type="submit" value="送信"> <input type="reset" value="取消"> </form>
　ブラウザにはこのように表示されます。

　汎用ボタンを作成するには、<input>タグにtype属性にbuttonを指定します。
　buttonは汎用ボタンで、それ自体には何の意味を持ちません。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="Click"> </form>
　ブラウザにはこのように表示されます。

　汎用ボタンを作成するには、<button>タグを使用します。
　この<button>タグも汎用ボタンで、それ自体には何の意味を持ちません。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <button>Click</button> </form>
　ブラウザにはこのように表示されます。

　ボタンの大きさを変更するには、<button>タグにstyle属性を指定します。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <button style="width: 100px; height: 50px;">Click</button> </form>
　ブラウザにはこのように表示されます。

　ボタンの内容を変更するには、<input>タグにstyle属性を指定します。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="button" value="Click" style="background: #ff0000; color: #ffffff; font-weight: bold;"> </form>
　ブラウザにはこのように表示されます。

　ボタンの内容を変更するには、<button>タグを使用します。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <button><font color="#0000ff"><b>Click</b></font></button> </form>
　ブラウザにはこのように表示されます。

　ボタンの内容を変更するには、<button>タグにstyle属性を指定します。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <button style="background: #ff0000; color: #ffffff; font-weight: bold;">Click</button> </form>
　ブラウザにはこのように表示されます。

　ボタンに文字・文章を流すには、<marquee>タグを使用します。
　例えば、下記のような記述をしてから、ブラウザで確認してください。
　　<form> <button><marquee>Click</marquee></button> </form>
　ブラウザにはこのように表示されます。

　テキストフォームに初期値(デフォルト値)を設定するには、<input>タグにvalue属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="text" value="MAJIDEKA.COM"> </form>
　ブラウザにはこのように表示されます。

　テキストエリアに初期値を設定するには、<textarea>〜</textarea>の〜に初期値を記述します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <textarea name="MAJIDEKA" cols="30" rows="5">MAJIDEKA.COM</textarea> </form>
　ブラウザにはこのように表示されます。

　テキストエリアの初期値を改行するには、単純に改行します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <textarea name="MAJIDEKA" cols="30" rows="5">MAJIDEKA.COM MAJIDEKA.COM MAJIDEKA.COM</textarea> </form>
　ブラウザにはこのように表示されます。

　ラジオボタンに初期値を設定するには、<input>タグにchecked属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="radio" name="MAJI" checked>MAJIDEKA <input type="radio" name="MAJI">MAJIDEYO <input type="radio" name="MAJI">MAJINOSUKE </form>
　ブラウザにはこのように表示されます。

　チェックボックスに初期値を設定するには、<input>タグにchecked属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="checkbox" name="MAJI">MAJIDEKA <input type="checkbox" name="MAJI">MAJIDEYO <input type="checkbox" name="MAJI" checked>MAJINOSUKE </form>
　ブラウザにはこのように表示されます。

　セレクトボックスに初期値を設定するには、フォーカスをあてる対象にfocus()を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <select name="s1"> <option value="MAJIDEKA">MAJIDEKA <option value="MAJIDEYO" selected>MAJIDEYO <option value="MAJINOSUKE">MAJINOSUKE </select> </form>
　ブラウザにはこのように表示されます。

　入力文字数を制限するには、<input>タグにmaxlength属性を指定します。
　maxlength="n"のnには入力制限数を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="text" maxlength="20"> </form>
　ブラウザにはこのように表示されます。

　日本語入力を制限するには、<textarea>タグにstyle属性にime-mode: active;を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <textarea style="ime-mode: active;"></textarea> </form>
　ブラウザにはこのように表示されます。

　フォームにフォーカスをあてるには、フォーカスをあてる対象にfocus()を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form name="f1" action="#"> <input type="text" name="t1"> <input type="button" value="TEXT1" onclick="document.f1.t1.focus()"><br> <input type="text" name="t2"> <input type="button" value="TEXT2" onclick="document.f1.t2.focus()"> </form>
　ブラウザにはこのように表示されます。

　ページを開いたときに指定したフォームにフォーカスをあてておくには、<body>タグにonload属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<body onload="document.f1.t1.focus()">
　ブラウザにはこのように表示されます。

　フォーム部品をグループ化するには、<fieldset>タグを使用します。
　<legend>タグを使用することで、グループにタイトルをつけることができます。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <fieldset> <legend>MAJIDEKA.COM</legend> 名前：<input type="text" name="NAME"><br> メールアドレス：<input type="text" name="MAILADDRESS"><br> <textarea cols="30" rows="5"></textarea><br> </fieldset> <input type="submit" value="送信"> <input type="reset" value="取消"> </form>
　ブラウザにはこのように表示されます。

　フォーム部品の色を変更するには、<input>タグや<textarea>タグにstyle属性を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<form> <input type="text" style="color: #ff00ff; background: #ccffff;"><br> <textarea cols="30" rows="5" style="color: #800000; background: #ffffcc; border: 1 solid #00ff00;"></textarea> </form>
　ブラウザにはこのように表示されます。