本课学习标签回顾

form 表单 对于form必须有action属性,提交数据地址
table 表单页眉
tbody 表单内容
input 按钮 提交数据必须有name属性 按钮文字需要使用vlaue表示 提交数据需要放在form标签内

  • input常见类型
    type="text"文本输入框

type="password"密码框
type="radio"单选框
type="chexkbox"复选框
type="button"普通按钮
type="submit"提交按钮
type="reset"重置按钮
type="file"文件选择框

本课调用属性

action 数据提交
border 表单边框
cellspacing 表格间隙
width height 宽 高
align 对齐样式
type 样式
value 按钮值

本课重要代码示例

<form action="#"><!--action数据提交"#"地址-->
 <table border="1px" cellspacing="0" width="600px"><!--表单边框为1像素间距为0宽度为600-->
  <tbody>
   <tr height="40px" align="center"><!--表单高度为40对齐样式为居中-->
    <td>用户名:</td>
    <td>
     <input type="text" name="loginname"><!--按钮样式为编辑框-->
    </td>
    <td>密码:</td>
    <td>
     <input type="pwssword" name="pws"><!--密码输入框-->
    </td>
   </tr>
   <tr>
    <td>
     <input type="submit" value"提交">
     <input type="reset" value"重置">
    </td>
   </tr>
  </tbody>
 </tabl>
</form>

本课成品案例

案例源代码

完整代码

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>登录表单</title>
 </head>
 <body>
  <form action="#"><!--form表单 action数据提交地址-->
  <table border="1px" cellspacing="0" width="600px"><!--border边框 cellspacing间隙 width宽度-->
  <tbody>
  <tr height="40px" align="center"><!--height高度 align对齐样式 center居中-->
  <td rowspan="4"><img src="images/nike.gif" width="300px" height="160px"></td><!--rowspan垂直合并-->
  <td colspan="2"><h1>登陆表单</h1></td><!--colspan水平合并-->
  </tr>
   <tr height="40px">
  <td align="right">用户名:</td>
  <td>
    <input type="text" name="loginname"><!--input按钮type样式-->
  </td>
  </tr>
  <tr height="40px">
  <td align="right">密码:</td><!--right居右 -->
  <td>
    <input type="password" name="pwd">
  </td>
  </tr>
  <tr height="40px">
  <td colspan="2"  align="center">
    <input type="submit" value="提交"><!--value按钮的值 submit提交表单-->
    <input type="reset" value="重置">
  </td>
  </tr>
  </tbody>
  </table>
  </form>
 </body>
</html>

Last modification:May 19th, 2020 at 06:26 pm
如果觉得我的文章对你有用,请随意赞赏