HTML5のform関連 - input要素、label要素、button要素、select、textarea要素
1. input要素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> input要素 </title> </head> <body> <form action="http://www.google.co.jp" method="get"> <label><b>input要素について</label></b><br/> type=text<input id="username" name="username" type="text" /><br/> type=text readonly<input id="username2" name="username" type="text" readonly="readonly" /><br/> type=password<input id="password" name="password" type="password" /><br/> type=hidden<input id="hidden" name="hidden" type="hidden" /><br/> type=radio<br/> <input id="color" name="color" type="radio" value="red"/> <input id="color2" name="color" type="radio" value="green" /> <input id="color3" name="color" type="radio" value="blue"/><br/> type=checkbox<br/> <input id="website" name="website" type="checkbox" value="leegang.org" /> <input id="website2" name="website" type="checkbox" value="crazyit.org" /><br/> type=file<input id="file" name="file" type="file"/><br/> type=image<input type="image" src="images/wjc.gif" alt="xx"/><br/> type=sumbit<br/> <input id="ok" name="ok" type="submit" value="ok" /> <input id="dis" name="dis" type="submit" value="disabled" disabled="disabled" /> <input id="cancel" name="cancel" type="reset" value="reset"/> <input id="no" name="no" type="button" value="none" /> </form> </body> </html>
2. label要素
label要素はリクエストパラメータを生成しない。
主な機能としては、lableをクリックすると関連する要素がフォーカスを取得する
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> label要素 </title> </head> <body> <form action="http://www.google.co.jp" method="get"> <label for="username">ユーザ名</label> <input id="username" name="username" type="text" /><br /> <label>パスワード<input id="password" name="password" type="password" /> </label><br /> <input id='ok' type="submit" value="登録" /> </form> </body> </html>
3. button要素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> button要素 </title> </head> <body> <form action="http://google.co.jp" method="get"> <button type="button"><b>submit</b></button><br /> <button type="reset"><b></b></button><br /> <button type="submit"><img src="images/logo.jpg" alt="javait.hatenalblog.com"/> </button><br /> </form> </body> </html>
4. select要素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> select要素 </title> </head> <body> <form action="http://www.google.co.jp" method="post"> プログラミング言語<br /> <select id="skills" name="skills"> <option value="java">java言語</option> <option value="c">c言語</option> <option value="ruby">Ruby言語</option> </select><br /><br /><br /> 複数選択可能(要素は4つ)<br /> <select id="books" name="books" multiple="multiple" size="4"> <option value="java">java言語</option> <option value="c">c言語</option> <option value="ruby">Ruby言語</option> </select><br /> option group使用<br /> <select id="group" name="group" multiple="multiple" size="6"> <optgroup label="グループ1"> <option value="1-1" label="aaaaaaaa">option1-1</option> <option value="1-2">option1-2</option> <option value="1-3">option1-3</option> </optgroup> <optgroup label="group2"> <option value="2-1">option2-1</option> <option value="2-2">option2-2</option> </optgroup> </select><br /> <button type="submit"><b>submit</b></button><br /> </form> </body> </html>
5. textarea要素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> textarea要素 </title> </head> <body> <form action="http://www.google.co.jp" method="post"> 2行20列<br /> <textarea cols="20" rows="2"></textarea><br /> 4行28列 readonly<br /> <textarea cols="28" rows="4" readonly="readonly"> 一行目XXXXX 二行目XXXXX </textarea><br /> <button type="submit"><b>submit</b></button><br /> </form> </body> </html>
