設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pretty Forms | 設置サンプル</title>
<script type="text/javascript">
function showFormData(frm){
message="The values of the form are: \n-------------------------------------\n";
message+="text area = \t" + frm.textarea.value + "\n\n";
message+="textbox = \t" + frm.textbox.value + "\n\n";
message+="select box = \t" + frm.selectMenu[frm.selectMenu.selectedIndex].innerHTML + "\n\n";
message+="checkboxes = \t" + frm.checkbox1.checked + ", " + frm.checkbox2.checked + ", " + frm.checkbox3.checked + "\n\n";
if(frm.radioButtons[0].checked){
message+="radio buttons = \t" + frm.radioButtons[0].value + "\n\n";
}else if(frm.radioButtons[1].checked){
message+="radio buttons = \t" + frm.radioButtons[1].value + "\n\n";
}else if(frm.radioButtons[2].checked){
message+="radio buttons = \t" + frm.radioButtons[2].value + "\n\n";
}
window.alert(message);
return false;
}
function doSomething(){
showText = document.getElementById("signalEvent");
showText.innerHTML = "You triggered an event";
setTimeout("showText.innerHTML = ' '",1000)
}
</script>
<script type="text/javascript" src="include/css/layout_form/prettyforms/prettyForms.js"></script>
<link rel="stylesheet" href="include/css/layout_form/prettyforms/prettyForms.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body onload="prettyForms()">
<h1><a href='http://www.agavegroup.com/?p=35'>Pretty Forms</a> | 設置サンプル</h1>
<form id="myForm" action="" onsubmit="return(showFormData(this))">
<p>
<label>textarea: </label><textarea name="textarea" cols="60" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
<br class="clearAll" /><br>
</p>
<p>
<label><strong>text box: </strong></label><input name="textbox" type="text" onfocus="doSomething()" value="Lorem ipsum" />
<br class="clearAll" /><br>
</p>
<p>
<label><strong>select box:</strong> </label>
<select name="selectMenu" onchange="doSomething()">
<option value="1">row 1 row 1 row 1 row 1</option>
<option value="2">row 2 row 2 row 2 row 2</option>
<option value="3" selected="selected">row 3 row 3 row 3 row 3</option>
<option value="4">row 4 row 4 row 4 row 4</option>
</select>
<br class="clearAll" /><br>
</p>
<p>
<label>checkboxes: </label>
<input type="checkbox" name="checkbox1" /><label>check 1</label>
<input type="checkbox" name="checkbox2" onchange="doSomething()" /><label><strong>check 2</strong></label>
<input type="checkbox" name="checkbox3" /><label>check 3</label>
<br class="clearAll" /><br>
</p>
<p>
<label>radio buttons: </label>
<input type="radio" name="radioButtons" value="1" /><label>radio 1</label>
<input type="radio" name="radioButtons" value="2" /><label>radio 2</label>
<input type="radio" name="radioButtons" value="3" checked="checked" onchange="doSomething()" /><label><strong>radio 3</strong></label>
<br class="clearAll" /><br>
</p>
<p><input type="submit" value="check inputs" /></p>
</form>
</body>
</html>