sublime_text寫的框架小結
阿新 • • 發佈：2019-01-07
1.簡單的框架小結
2.document.getElementById("xx")
獲取的是id為xx的框
document.getElementById("showinfo").value
獲取的是id為xx框的內容
3.style="border-collapse:collapse"
代表的是將重複的框的線進行合併
4.colspan="2"
5.button、submit、reset的區別
button是按鈕單純的點選沒有反應必須要有相應的點選事件 eg：onclick="validate()"
同時相應的方法必須寫在<head>和</head>用<script><script>框起來之間
合併重複的單元格
<head>
<meta charset="UTF-8"><title>我愛學java</title>
<script type="text/javascript">
function validate()
{
var username=document.getElementById("username");
if(username.value==null||username.value==""){
username.focus();
return;
}
}
function showinfo()
{
var showinfo=document.getElementById("showinfo");
var username=document.getElementById("username");
if(username.value==null||username.value==""){
var showarn=document.getElementById("showarn");
showarn.style.display="none";
showinfo.style.display="";
username.style.border="green 2px solid";
showinfo.style.display="none";
}
}
function showarn()
{ var showarn=document.getElementById("showarn");
var username=document.getElementById("username");
if(username.value==null||username.value==""){
var showinfo=document.getElementById("showinfo");
showinfo.style.display="none";
showarn.style.display="";
username.style.border="red 2px solid";
}else{
showinfo.style.display="none";
}
}
</script>
</head>
<body>
<div style="text-align:center;font-size:25px;margin-bottom:25px">
使用者註冊
</div>
<form name="reset" action="" method="post" >
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" bordercolor="#0099CC" style="border-collapse:collapse" >
<tr>
<td style="text-align:right;height:40px">使用者名稱：</td>
<td style="padding-left:10px" ><input id="username" type="text" name="username" style="width:200px" onfocus="showinfo()" onblur="showarn()" /><span id="showinfo" style="display:none;color:green">使用者名稱必須是數字和字母的組合</span><span id="showarn" style="display:none;color:red">請輸入使用者名稱</span></td>
</tr>
<tr>
<td style="text-align:right;height:40px">密碼：</td>
<td style="padding-left:10px"><input type="password" name="password" style="width:200px" /></td>
</tr>
<tr>
<td style="text-align:right;height:40px">性別：</td>
<td style="padding-left:10px"><input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女</td>
</tr>
<tr>
<td style="text-align:right;height:40px">學歷：</td>
<td style="padding-left:10px">
<select name="degree" >
<option value="1">研究生以上</option>
<option value="2">本科</option>
<option value="3">高中及其以下</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;height:40px">愛好：</td>
<td style="padding-left:10px">
<input type="checkbox" name="hobby" value="上網">上網
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="逛街">逛街
<input type="checkbox" name="hobby" value="睡覺">睡覺
</td>
</tr>
<tr>
<td style="text-align:right;height:40px">研究方向：</td>
<td style="padding-left:10px;padding-bottom:15px;padding-top:15px">
<select name="degree" multiple="multiple">
<option value="1">java</option>
<option value="2">.net</option>
<option value="3">資料結構</option>
<option value="3">作業系統</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;height:40px">照片：</td>
<td style="padding-left:10px">
<input type="file" name="photo">
</td>
</tr>
<tr>
<td style="text-align:right;height:40px" >備註：</td>
<td style="padding-left:10px;padding-bottom:15px;padding-top:15px">
<textarea name="bz" cols="50" rows="10" "></textarea>
</tr>
<tr>
<td colspan="2" style="text-align:center;height:40px">
<input type="button" value="按鈕" onclick="validate()">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="hidden" name="hiddendata" value="12657">
</td>
</tr>
</table>
</form>
</body>