読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

個人勉強用ブログだっす。

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>

http://f.st-hatena.com/images/fotolife/l/liguofeng29/20160118/20160118230000.gif

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>

f:id:liguofeng29:20160118230501g:plain

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>

f:id:liguofeng29:20160118231002g:plain

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>

f:id:liguofeng29:20160118231659g:plain

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>

f:id:liguofeng29:20160118232154g:plain