NEC Mark
WebOTX Manual V10.3 (第4版)

目次を表示

2.15. スニペット 一覧

HTML5、CSS3、JQuery Mobileのスニペットが提供されます。

2.15.1. WebOTX WebSocket Tag

2.15.1.1. WebSocket
<script type="text/javascript">
    var ws = null;
    function startWebSocket() {
        if ('WebSocket' in window) {
            ws = new WebSocket("ws://localhost/");
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket("ws://localhost/");
        } else {
            alert("WebSocket is not supported by this browser.");
            return;
        }
        ws.onmessage = function(evt) {
            //TODO
        };
        ws.onclose = function(evt) {
            //TODO
        };
        ws.onopen = function(evt) {
            //TODO
        };
        ws.onerror = function(evt) {
            //TODO
        };
    }
    function sendMsg() {
        if (ws == null) {
            alert("WebSocket is not supported by this browser.");
            return;
        } else {
            ws.send("something");
        }
    }
    function close() {
        ws.close();
    }
</script>

使用例：

表2.2.15.1-1
効果図
 コード


index.html 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>index.html</title>

<script type="text/javascript">
	var ws = null;
	function startWebSocket() {
		if ('WebSocket' in window) {
			ws = new WebSocket("ws://localhost:80/WebSocketSample/WebSocketServlet");
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket("ws://localhost:80/WebSocketSample/WebSocketServlet");
		} else {
            alert("WebSocket is not supported by this browser.");
			return;
		}

		ws.onmessage = function(evt) {
			var console = document.getElementById('console');
			var p = document.createElement('p');
			p.style.wordWrap = 'break-word';
			p.innerHTML = evt.data;
			console.appendChild(p);
			while (console.childNodes.length > 25) {
				console.removeChild(console.firstChild);
			}
			console.scrollTop = console.scrollHeight;
		};

		ws.onclose = function(evt) {
		};

		ws.onopen = function(evt) {
		};
		
		ws.onerror = function(evt) {
			alert("websocket error: " + evt.data);
		};
	}

	function sendMsg() {
		if (ws == null) {
		    alert("WebSocket is not supported by this browser.");
		    return;
		}
		var text = document.getElementById('writeMsg');
		ws.send(text.value);
		text.value = "";
	}
	
	function close() {
        ws.close();
    }
</script>

</head>
<body onload="startWebSocket();" onunload="close();">
	<p>
		<B>WebSocket Example</B>
	</p>
	<div>
		<div id="console-container">
			<div id="console"></div>
		</div>
		<input type="text" id="writeMsg"
			placeholder="press Send button to send a message"></input> <input
			type="button" value="Send" onclick="sendMsg()"></input>
	</div>
</body>
</html>
関連のJavaコード WebSocketServlet.java、WebSocketInbound.javaは、WebSocketのサンプル を参照してください。

2.15.2. WebOTX HTML5 Tag

2.15.2.1. Audio
<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="REPLACE_URL" type="audio/mpeg" />
    Your browser does not support the audio tag.
</audio>

使用例：

表2.2.15.2-1
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<audio controls="controls" autoplay="autoplay" loop="loop">
    <source src="test.mp3" type="audio/mpeg" />
    Your browser does not support the audio tag.
</audio>

</body>
</html>
2.15.2.2. Canvas Tag
<canvas id="canv_"></canvas>

使用例：

表2.2.15.2-2
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>
2.15.2.3. DataList Tag
<datalist id="dl_">
    <option value="item1">
    <option value="item2">
</datalist>

使用例：

表2.2.15.2-3
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<datalist id="dl_">
    <option value="item1">
    <option value="item2">
</datalist>

</body>
</html>
2.15.2.4. Keygen Tag
<form action="REPLACE_URL" method="get">
    <input type="text" name="user_name" />
    <keygen name="key" />
    <input type="submit" />
</form>

使用例：

表2.2.15.2-4
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<form action="REPLACE_URL" method="get">
    <input type="text" name="user_name" />
    <keygen name="key" />
    <input type="submit" />
</form>

</body>
</html>
2.15.2.5. Meter Tag
<meter min="0" max="1" value="0.5"></meter>

使用例：

表2.2.15.2-5
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<meter min="0" max="1" value="0.5"></meter>

</body>
</html>
2.15.2.6. Video Tag
<video width="200" height="100" controls="controls" loop="loop">
    <source src="REPLACE_URL" type="video/mpeg" />
    Your browser does not support the video tag.
</video>

使用例：

表2.2.15.2-6
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<video width="600" height="400" controls="controls" loop="loop">
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support the video tag.
</video>

</body>
</html>
2.15.2.7. Local Storage
<script type="text/javascript">
    if (window.localStorage) {
        // add to localStorage
        localStorage.key = value; 
        var ws = localStorage.getItem("key");
        
        // TODO use the value
        
        // remove from localStorage
        localStorage.removeItem("key");
    } else { 
        alert("Your browser does not support localStorage."); 
    } 
</script>

使用例：

表2.2.15.2-7
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
    if (window.localStorage) {
        // add to localStorage
        var value ="value";
        localStorage.key = value; 
        var ws = localStorage.getItem("key");
        
        // TODO use the value
        alert(ws);
        
        // remove from localStorage
        localStorage.removeItem("key");
    } else {
        alert("Your browser does not support localStorage."); 
    }
</script>

</body>
</html>
2.15.2.8. Session Storage
<script type="text/javascript">
    if (window.sessionStorage) {
        // add to sessionStorage
        sessionStorage.key = value; 
        var ws = sessionStorage.getItem("key");
        
        // TODO use the value
        
        // remove from sessionStorage
        sessionStorage.removeItem("key");
    } else { 
        alert("Your browser does not support sessionStorage."); 
    } 
</script>

使用例：

表2.2.15.2-8
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">
    if (window.sessionStorage) {
        // add to sessionStorage
        var value = "test"
        sessionStorage.key = value; 
        var ws = sessionStorage.getItem("key");
        
        // TODO use the value
        alert(ws);
        
        // remove from sessionStorage
        sessionStorage.removeItem("key");
    } else { 
        alert("Your browser does not support sessionStorage."); 
    }
</script>

</body>
</html>
2.15.2.9. HTML5レイアウト
<!DOCTYPE HTML>
<html>
<body>
    <nav>
        <a href="">text</a>
        <a href="">text</a>
        <a href="">text</a>
    </nav>
    <header>
        <h1>text</h1>
    </header>
    <article>
        <a href="">text</a><br />
    </article>
    <section>
        <h1>text</h1>
        <p>text</p>
    </section>
    <footer>text</footer>
</body>
</html>

使用例：

表2.2.15.2-9
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<body>
    <nav>
        <a href="">text</a>
        <a href="">text</a>
        <a href="">text</a>
    </nav>
    <header>
        <h1>text</h1>
    </header>
    <article>
        <a href="">text</a><br />
    </article>
    <section>
        <h1>text</h1>
        <p>text</p>
    </section>
    <footer>text</footer>
</body>
</html>
2.15.2.10. CSS自動切り替え
<link rel="stylesheet" href="REPLACE_UR" media="(min-width:1024px)"/>
<link rel="stylesheet" href="REPLACE_UR" media="(max-width:1023px) and (min-width:641px)"/>
<link rel="stylesheet" href="REPLACE_UR" media="(max-width:640px)"/>

使用例：

表2.2.15.2-10
効果図
 コード


HTML 
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./css1.css" media="(min-width:1024px)"/>
<link rel="stylesheet" href="./css2.css" media="(max-width:1023px) and (min-width:641px)"/>
<link rel="stylesheet" href="./css3.css" media="(max-width:640px)"/>
<style> 
.wrapper {
	border: solid 1px #666;	
	padding: 5px 10px;
	margin: 40px;
}
</style>
</head>
<body>

<div class="wrapper test">test</div>

</body>
</html>
css1.css 
@CHARSET "UTF-8";
div{
	background: #F90;
}
css2.css 
@CHARSET "UTF-8";
div{
	background: #9CF;
}
css3.css 
@CHARSET "UTF-8";
div{
	background: #F9C;
}

2.15.3. WebOTX CSS3 Tag

2.15.3.1. ボーダー効果
#id_ {
    border-radius: 5px;
}

使用例：

表2.2.15.3-1
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
<style> 
#img
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#img {
    border-image:url(border.png) 30 30 round;
}

#radius
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
}

#radius {
    border-radius: 20px;
}
</style> 
</head>
<body>

<div id="radius">radius</div>

</body>
</html>
2.15.3.2. 背景効果
#id_ {
    background:url(REPLACE_URL);
    background-size: 200px 100px;
    background-origin:content-box;
}

使用例：

表2.2.15.3-2
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
<style> 
#div1 {
	border:1px solid black;
	padding:100px;
    background:url(bg_flower.gif);
    background-size: 200px 100px;
    background-origin:content-box;
}
</style>
</head> 
<body>

<div id="div1"></div>

</body>
</html>
2.15.3.3. テキスト効果
#id_ {
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap:break-word;
}

使用例：

表2.2.15.3-3
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
<style> 
div
{
    width:11em; 
    border:1px solid #000000;
}

#test {
    text-shadow: 5px 5px 5px #FF0000;
    word-wrap:break-word;
}
</style> 
</head>
<body>

<div id="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

</body>
</html>
2.15.3.4. CSS自動切り替え
@media ( min-width :1024px) {
    /* TODO: Add the content when the browser size is greater than 1024. */
}
@media ( max-width :1023px) and ( min-width :641px) {
   /* TODO: Add the content when the browser size is between ${smallersizer} and 1023. */
}
@media ( max-width :640px) {
   /* TODO: Add the content when the browser size is less than 640. */
}

使用例：

表2.2.15.3-4
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Demos</title>
<style> 
.wrapper {
	border: solid 1px #666;	
	padding: 5px 10px;
	margin: 40px;
}

.viewing-area span {
	color: #666;
	display: none;
}


@media ( min-width :1024px) {
    /* TODO: Add the content when the browser size is greater than 1024. */
    .two {
		background: #F90;
	}
	span.gt900 {
		display: inline-block;
	}
}
@media ( max-width :1023px) and ( min-width :641px) {
   /* TODO: Add the content when the browser size is between ${smallersizer} and 1023. */
   .three {
		background: #9CF;
	}
	span.bt600-900 {
		display: inline-block;
	}
}
@media ( max-width :640px) {
   /* TODO: Add the content when the browser size is less than 640. */
   .one {
		background: #F9C;
	}
	span.lt600 {
		display: inline-block;
	}
}
</style> 
</head>
<body>

    <div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
    <div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
    <div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
    <p class="viewing-area"><strong>Your current viewing area is:</strong> <span class="lt600">less than 600px</span> <span class="bt600-900">between 600 - 900px</span> <span class="gt900">greater than 900px</span></p>

</body>
</html>

2.15.4. WebOTX JQuery Mobile Tag

Caution
本スニペットは、jQuery 1.9.1とjQuery Mobile 1.3.2 で動作確認をとっています。

2.15.4.1. Button
<a href="index.html" data-role="button">button name</a>

使用例：

表2.2.15.4-1
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<a href="index.html" data-role="button">button name</a>

</body>
</html>
2.15.4.2. Checkbox
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <legend>Agree to the terms:</legend>
    <input type="checkbox" name="name" id="checkbox_" class="custom" />
    <label for="checkbox_">I agree</label>
    </fieldset>
</div>

使用例：

表2.2.15.4-2
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    <legend>Agree to the terms:</legend>
    <input type="checkbox" name="name" id="checkbox_" class="custom" />
    <label for="checkbox_">I agree</label>
    </fieldset>
</div>

</body>
</html>
2.15.4.3. Collapsibleset
<div data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

使用例：

表2.2.15.4-3
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="collapsible-set">
    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>
</div>

</body>
</html>
2.15.4.4. Controlgroup
<div data-role="controlgroup">
    <a href="" data-role="button">Yes</a>
    <a href="" data-role="button">No</a>
    <a href="" data-role="button">Maybe</a>
</div>

使用例：

表2.2.15.4-4
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="controlgroup">
    <a href="" data-role="button">Yes</a>
    <a href="" data-role="button">No</a>
    <a href="" data-role="button">Maybe</a>
</div>

</body>
</html>
2.15.4.5. Dialog
<a href="REPLACE_URL" data-rel="dialog">Dialog</a>

使用例：

表2.2.15.4-5
効果図
 コード


jqdialog.html 
<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<a href="index.html" data-rel="dialog">Dialog</a>

</body>
</html>
index.html 
<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

    <div data-role="dialog" id="msg">
        <div data-role="header" data-theme="d">
            <h1>Notice</h1>
        </div>
        <div data-role="content" data-theme="c">
            <p id="ps"></p>
        </div>
        <div data-role="footer" data-position="fixed" data-theme="d">
            <a href="" data-role="button" data-transition="slide">OK</a>
        </div>
    </div>

</body>
</html>
2.15.4.6. Flip toggle switch
<div class="containing-element">
    <label for="flip-1">Flip switch:</label>
    <select name="fw_" id="fw_" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

使用例：

表2.2.15.4-6
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div class="containing-element">
    <label for="flip-1">Flip switch:</label>
    <select name="fw_" id="fw_" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>

</body>
</html>
2.15.4.7. Listview
<ul data-role="listview">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
</ul>

使用例：

表2.2.15.4-7
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<ul data-role="listview">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
</ul>

</body>
</html>
2.15.4.8. Navbar
<div data-role="navbar">
    <ul>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
    </ul>
</div>

使用例：

表2.2.15.4-8
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="navbar">
    <ul>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
    </ul>
</div>

</body>
</html>
2.15.4.9. Page
<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <h4>Page content</h4>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

使用例：

表2.2.15.4-9
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <h4>Page content</h4>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>
2.15.4.10. Popup
<a href="#pop_" data-rel="popup">Open Popup</a>
<div data-role="popup" id="pop_">
    <p>This is a completely basic popup, no options set.<p>
</div>

使用例：

表2.2.15.4-10
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<a href="#pop_" data-rel="popup">Open Popup</a>
<div data-role="popup" id="pop_">
    <p>This is a completely basic popup, no options set.<p>
</div>

</body>
</html>
2.15.4.11. Radio
<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="radio_" id="radio_" value="choice_" checked="checked" />
    <label for="radio_">Cat</label>
</fieldset>

使用例：

表2.2.15.4-11
効果図
 コード
 


<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery Mobile</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input type="radio" name="radio_" id="radio_" value="choice_" checked="checked" />
    <label for="radio_">Cat</label>
</fieldset>

</body>
</html>
Copyright (C) 1998 - 2020 NEC Corporation. All rights reserved.