h5表单验证

最新推荐文章于 2024-03-13 16:33:02 发布

syc暮云。

最新推荐文章于 2024-03-13 16:33:02 发布

阅读量424

点赞数

文章标签： html 正则表达式

本文链接：https://blog.csdn.net/zzfr_llex/article/details/105368722

版权

我比较笨就用笨方法了
1、代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单</title>
 </head>
 <body>
  <table bgcolor="pink" bordercolor="#87CEFA" align="center" cellpadding="2" cellspacing="0">
  <form action="http://www.baidu.com" method="post">
   <tr>
    <td colspan="4" valign="middle" align="center">
    <br />
   <font face="黑体" size="6"><b>员工信息登记表</b></font>
    </td>
   </tr>
   <tr>
    <td width="120">
   &nbsp;&nbsp;&nbsp;&nbsp;用户登录名：
    </td>
    <td colspan="3">
     <input type="text" size="25" maxlength="15" value="wcz@163.com" />
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;真实姓名：
    </td>
    <td colspan="3">
     <input type="text" size="25" maxlength="10" value="王传智" required="required" />(必填，只能输入汉字)
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;真实年龄：
    </td>
    <td colspan="3">
     <input type="text" size="25" malength="3" value="24" required="required">(必填)
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;出生日期：
    </td>
    <td colspan="3">
    <input type="date" checked="年/月/日" required="required">(必填)
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;电子邮箱：
    </td>
    <td colspan="3">
     <input type="email" checked="123456@126.com" required="required" pattern="\S+@\S+\.\S+">(必填)
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;身份证号：
    </td>
    <td colspan="3">
     <input type="text" size="25" required="required" pattern="\d{18}$">(必填,能够以数字,字母x结尾的短身份证号)
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;手机号码：
    </td>
    <td colspan="3">
     <input type="text" size="25" required="required">(必填)
    </td>
   </tr>
   <tr>
    <td>
   &nbsp;&nbsp;&nbsp;&nbsp;幸运颜色：
    <td colspan="3">
     <input type="color" value="black">(请选择你喜欢的颜色)
    </td> 
   </tr>
   <tr>
    <td>
      
    </td>
    <td align="left">
     <br />
   <input type="submit" value="         提交          ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <input type="reset" value="         重置          ">
   <br /><br /><br />
    </td>
   </tr> 
   
  </form>
  </table>
 </body>
</html>

2、成品
在这里插入图片描述

syc暮云。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5表单验证

我比较笨就用笨方法了1、代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <table bgcolor="pink" bordercolor="#87...
复制链接

扫一扫