零基础搭建属于自己的网站--网页设计【学习笔记12】

最新推荐文章于 2024-07-10 01:10:22 发布

向大牛迈进

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量161

点赞数

分类专栏： HTML 网页文章标签： checkbox 网页设计 html javascript

本文链接：https://blog.csdn.net/weixin_52357664/article/details/117476917

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

网页

12 篇文章 0 订阅

订阅专栏

实践篇——表单

一、创建表单

插入——表单——表单

表单属性：

代码：

<form id="form1" name="form1" method="post" action="">
</form>

二、表单元素

（一）文本域

插入——表单——文本域

属性：

代码：

<input name="textfield" type="text" id="textfield" value="" size="50" />

（二）隐藏域

插入——表单——隐藏域

属性：

代码：

<input type="hidden" name="hiddenField" id="hiddenField" />

（三）复选框

插入——表单——复选框

属性：

代码:

 <input type="checkbox" name="checkbox" id="checkbox" />
    <label for="checkbox"></label>

（四）单选按钮

插入——表单——单选按钮

属性：

代码：

<input type="radio" name="radio" id="radio" value="radio" />
    <label for="radio"></label>

（五）列表/菜单

插入——表单——选择（列表/菜单）

属性：

代码：

 <label for="select"></label>
    <select name="select" id="select">
    </select>

（六）跳转菜单

插入——表单——跳转菜单

属性：

代码：

<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
      <option>项目1</option>
    </select>

（七）图像域

插入——表单——图像域

属性：

代码：

<input type="image" name="imageField" id="imageField" src="file:///D|/site/下载.jpg" />

（八）文件域

插入——表单——文件域

属性：

代码：

 <label for="fileField"></label>
    <input type="file" name="fileField" id="fileField" />

（九）按钮

插入——表单——按钮

属性：

代码：

 <input type="submit" name="button" id="button" value="提交" />

今日任务：效果如图

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
function MM_validateForm() { //v4.0
  if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
      if (val) { nm=val.name; if ((val=val.value)!="") {
        if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
          if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
        } else if (test!='R') { num = parseFloat(val);
          if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
          if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
            min=test.substring(8,p); max=test.substring(p+1);
            if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
      } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
} }
</script>
</head>

<body>
<table width="798" height="791" border="0" cellpadding="0" cellspacing="0">
  <tr bgcolor="#CCCCFF">
    <th colspan="2" scope="col">欢迎注册会员</th>
  </tr>
  <tr>
    <td width="200" bgcolor="#FFCCCC"><div align="right">用户名： </div></td>
    <td width="585" bgcolor="#FFCCCC"><form id="form2" name="form2" method="post" action="">
      <label for="textfield2"></label>
      <input name="textfield" type="text" id="textfield2" onblur="MM_validateForm('textarea','','R');return document.MM_returnValue" />
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">密码：</div></td>
    <td bgcolor="#FFCCCC"><form id="form3" name="form3" method="post" action="">
      <label for="textfield3"></label>
      <input name="textfield2" type="password" id="textfield3" onchange="MM_validateForm('textfield2','','RinRange0:9');return document.MM_returnValue" value="123456" />
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">确认密码：</div></td>
    <td bgcolor="#FFCCCC"><form id="form4" name="form4" method="post" action="">
      <label for="textfield4"></label>
      <input name="textfield3" type="text" id="textfield4" onblur="MM_validateForm('textfield2','','RinRange0:9');return document.MM_returnValue" />
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">密保问题：</div></td>
    <td bgcolor="#FFCCCC"><form id="form5" name="form5" method="post" action="">
      <label for="select"></label>
      <select name="select" id="select" onchange="MM_validateForm('textfield2','','R');return document.MM_returnValue">
        <option value="1">您的年龄</option>
        <option value="2">您的地址</option>
        <option value="3">您的母校</option>
      </select>
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">密保问题答案：</div></td>
    <td bgcolor="#FFCCCC"><form id="form6" name="form6" method="post" action="">
      <label for="textfield5"></label>
      <input name="textfield4" type="text" id="textfield5" onblur="MM_validateForm('textfield2','','R');return document.MM_returnValue" />
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><p align="right">E-mai：</p></td>
    <td bgcolor="#FFCCCC"><form id="form7" name="form7" method="post" action="">
      <label for="textfield6"></label>
      <input name="textfield5" type="text" id="textfield6" onblur="MM_validateForm('textfield2','','R');return document.MM_returnValue" />
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">性别：</div></td>
    <td bgcolor="#FFCCCC"><form id="form8" name="form8" method="post" action="">男：
      <input name="radio" type="radio" id="radio" value="radio" checked="checked" />
      <label for="radio"></label>
      女：
      <input type="radio" name="radio" id="radio" value="radio" />
      <label for="radio"></label>
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">爱好：</div></td>
    <td bgcolor="#FFCCCC"><form id="form9" name="form9" method="post" action="">
      音乐：
      <input name="checkbox" type="checkbox" id="checkbox" value="checkbox" checked="checked" />
      <label for="checkbox"></label>
    美术：
      <input type="checkbox" name="checkbox2" id="checkbox2" />
体育：
      <input type="checkbox" name="checkbox3" id="checkbox3" />
书法：
      <input type="checkbox" name="checkbox4" id="checkbox4" />
    绘画：
      <input type="checkbox" name="checkbox5" id="checkbox5" />
      读书：
      <input type="checkbox" name="checkbox6" id="checkbox6" />
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">个人简介：</div></td>
    <td bgcolor="#FFCCCC"><form id="form10" name="form10" method="post" action="">
      <label for="textarea"></label>
      <textarea name="textarea" cols="45" id="textarea"></textarea>
    </form></td>
  </tr>
  <tr>
    <td bgcolor="#FFCCCC"><div align="right">友情链接：</div></td>
    <td bgcolor="#FFCCCC"><form id="form11" name="form11" method="post" action="">
      <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
        <option value="www.baidu.com">百度</option>
        <option value="www.kuaishou.com">快手</option>
        <option value="www.sina.com.cn">新浪</option>
      </select>
    </form></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#FFCCCC"><form id="form1" name="form1" method="post" action="">
      <div align="center">
        <input type="submit" name="button" id="button" value="提交" />
        <input type="reset" name="button2" id="button2" value="重置" />
      </div>
    </form></td>
  </tr>
</table>
</body>
</html>

真正的放手，是放过自己。

原创不易，欢迎批评指正，侵权必究