引子
说到JavaScript，不得不说它是一个简单好用的编程语言，啊啊啊！！对于首次接触它的小白的我而言，JavaScript给我的第一感觉就是，好牛皮。做出这个页面的我感觉自己牛逼哄哄（错觉错觉）
害，啥也不是
JavaScript，路漫漫其修远兮
话不多说，先上成品
对的，这个就是我所谓的牛逼哄哄的界面啦
接着咱们就来一起学习学习吧
上码
主体
<body onLoad="a()">
<table align="center">
<form action="#" method="get" name="myform" onSubmit="return b()">
<tr><th bgcolor="blue" text-align="center" colspan="2"><font color="white">欢迎注册</font></th></tr>
<br />
<tr><th><font size="3" color="blue">用 户 名 ：
<input name="name" type="text" size="20" id="name"/></font></th>
<th><font size="2" color="blue">长度不多于5个字符</font></th></tr>
<br />
<tr><th><font size="3" color="blue">用户密码：
<input name="password" type="password" size="20" id="password" /></font></th></tr>
<br />
<tr><th><font size="3" color="blue">密码确认：
<input name="repassword" type="password" size="20" id="repassword" /></font></th>
<th><font size="2" color="blue">需和用户密码保持一致</font></th></tr>
<br />
<tr><th>
<font size="3" color="blue"> 性别： </font>
<input name="radiobutton" type="radio" value="radiobutton"/>
<font size="3" color="blue">男 </font>
<input name="radiobutton" type="radio" value="radiobutton"/>
<font size="3" color="blue">女 </font>
</th></tr>
<br />
<tr><th>
<font size="3">
<input type="submit" name="submit" value="下一步" onBlur="c()"/>
</font></th>
<font size="3">
<th><input type="reset" name="submit2" value="清空"/></th>
</font>
</tr>
</form>
</table>
</body>
body标签内实现了对于HTML表单进行了编写，通过table创建了一个表格，同时使用form对注册页面的项在表格中有了很好的布局，形成了上图的大致的界面。
对于欢迎光临的效果实现
在th标签的bgcolor属性设置背景颜色，然后通过th下的font标签的color属性对“欢迎光临”字体进行改变实现蓝底白字
一开始，在body标签中添加onload事件，调用a函数，在表单标签中添加onsubmit事件调用b函数，格式为οnsubmit=”return b( )”
onload事件
onload 事件会在页面或图像加载完成后立即发生。
语法：
οnlοad=“SomeJavaScriptCode”（必需。规定该事件发生时执行的 JavaScript。）
支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件的 JavaScript 对象：
image, layer, window
onsubmit事件
onsubmit 事件会在表单中的确认按钮被点击时发生。
语法：
οnsubmit=“SomeJavaScriptCode”（必需。规定该事件发生时执行的 JavaScript。）
支持该事件的 HTML 标签：
<form>
支持该事件的 JavaScript 对象：
form
JavaScript部分
<script type="text/javascript" language="javascript">
function a (){
window.status="欢迎注册！";
}
function b(){
if(document.myform.name.value=="")
{alert("请输入用户名！");
document. myform.name.focus();
return false;}
if(document.myform.name.value!=""){
if(document.myform.name.value.length>5){
alert("用户名最多5位数！");
document. myform.name.focus();
return false;}
}
if(document.myform.password.value=="")
{alert("请输入用户密码！");
document.myform.password.focus();
return false;
}
if(document.myform.repassword.value=="")
{alert("请输入确认密码！");
document.myform.repassword.focus();
return false;}
else{
if((document.myform.password.value!=document.myform.repassword.value)==1){
alert("两次密码不一致！");
document.myform.repassword.focus();
return false;}
}
var flag=false;
for(i=0;i<myform.radiobutton.length;i++)
if(myform.radiobutton[i].checked)
{
flag=true;
break;
}
if(!flag)
{alert("请选择性别");
return false; }
return true;
}
</script>
此部分包含两个函数，分别为文档加载时设置的焦点函数（a）和提交表单时的验证函数（b）
相关格式
设置焦点
document.formname.elementsname. focus()
判断文本框是否为空
document.formname.elementsname.value= =""；
如果把“= =”改成“=”，则表示把右侧的空字符串赋值给元素，功能则变为清空此表单元素的内容；如果把“= =”改成“!=”，则表示判断两侧的数据是否不相等
例：
if(document.formname.elementname.value= ="") //判断是否为空
{alert("请输入用户名！"); //如果为空，则先提示
document. formname.elementname.focus(); //然后在此设置焦点
return false;} //最后返回false，阻止表单的提交
判断单选按钮是否被选
先设置一个布尔类型的变量，然后循环判断是否有按钮被选中，一旦发现有被选中的按钮，说明通过验证，则改变此布尔变量的值并且退出循环，然后根据此布尔变量来判断是否发出提示信息
例:
var flag=false;
for(i=0;i<formname.radioname.length;i++)
if(formname.radioname[i].checked)
{
flag=true;
break;
}
if(!flag)
{alert("请选择性别");
return false; }
返回元素值的长度
document.formname.elementsname.value.length
CSS样式
<style type="text/css">
table{
border-width:2px;
border-style:solid;
border-color:red;
}
</style>
用于构建table的样式
即边框线宽度、边框颜色以及边框样式三部分
好了，今天的web小白就分享到这里了，希望各位大佬们批评指正，有用的话记得点赞收藏哟！
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
