html表单实现小案例

最新推荐文章于 2024-04-24 14:37:39 发布
最新推荐文章于 2024-04-24 14:37:39 发布
阅读量142 收藏
点赞数
分类专栏： HTML 文章标签： html javascript
异想实验室
本文链接：https://blog.csdn.net/weixin_43775400/article/details/123070159
版权

HTML源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <style>
        .must {
            color: red;
        }

    </style>


</head>
<body>


<h4>注册页面</h4>

<form method="get" action="login.html">

    <table width="500" height="260" border="0" cellspacing="0">

        <tr>
            <td class="must">账号：</td>
            <td>
                <input type="text" value="要求英文字母≤5位" maxlength="5">
            </td>
        </tr>
        <tr>
            <td class="must">密码</td>
            <td>
                <input type="password" maxlength="5">
            </td>
        </tr>
        <tr>
            <td>
                照片：
            </td>
            <td>
                <input type="file" value="上传照片">

            </td>

        </tr>
        <tr>
            <td CLASS="must">性别：</td>
            <td>
                <input type="radio" name="sex" value="男" checked="checked"> 男<input type="radio" name="sex" value="女">
                女<br/>
            </td>
        </tr>

        <tr>
            <td>地区：</td>
            <td>
                <select>
                    <option>请选择</option>
                    <option>湖南</option>
                </select>
                <select>
                    <option>请选择</option>
                    <option>长沙市</option>
                </select>
                <select>
                    <option>请选择</option>
                    <option>长沙区</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>详细地址：</td>
            <td><input type="text" value="请输入您的详细地址"></td>
        </tr>

        <tr>
            <td class="must">婚姻状况：</td>
            <td><input type="radio" name="zhuangkuang" value="未婚" checked="checked"> 未婚 <input type="radio"
                                                                                               name="zhuangkuang"
                                                                                               value="离婚"> 离婚
            </td>
        </tr>

        <tr>
            <td class="must">学历：</td>
            <td>
                <select>
                    <option> 专科</option>
                </select></td>
        </tr>
        <tr>
            <td>喜好：</td>
            <td>
                <input type="checkbox" name="xihao" value="小鲜肉"> 小鲜肉
                <input type="checkbox" name="xihao" value="老腊肉" checked="checked"> 老腊肉
            </td>

        </tr>


        <tr>
            <td>个人介绍：</td>
            <td>
                <textarea cols="50" rows="10">请输入您的个人简介资料 </textarea>
            </td>
        </tr>


        <tr>
            <td></td>
            <td><input type="checkbox" name="shouquan" checked="checked"><a href="http://www.baidu.com"> 我同意注册条款</a>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="submit" value="提交注册">
                <input type="button" value="提交注册(js)" onclick="login()">
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="http://www.baidu.com">我是会员，立即登录</a></td>
        </tr>

        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                    <li>我承诺年满18岁</li>
                    <li>我承诺无犯罪记录</li>
                    <li>我承诺填写的信息真实有效</li>

                </ul>

            </td>
        </tr>

    </table>


</form>


<script>

    function login() {
        alert("确认提交信息无误");
        window.location.href = "http://www.baidu.com";
    }

</script>

</body>
</html>

 

异想实验室
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【实用】HTML的简单示例（表单篇）
Mankey_24的博客
10-09 6053
效果如下： 代码内容： <html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead>&
HTML（三） -- 表单设计
PUYALEI的博客
04-29 4763
目录1. 基本语法 2. 表单控件2.1 input控件input 常用属性：input type的表单项：2.2 select 控件2.3 textarea控件2.4 label 控件示例演示： 结果展示：示例演示： 结果展示：示例演示： 结果展示：代码演示： 结果展示：
HTML表单（详解网页表单如何实现）
最新发布
百赢出品，必属精品
04-24 2101
HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。元素用于为表单元素添加标签，提高可访问性。
Html的表单
热门推荐
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
html主题网站设计代码示例,网页设计参考:很不错的15个HTML网页表单设计实例
weixin_29361879的博客
05-30 3327
网页制作poluoluo文章简介：虽然HTML无法制作出十分酷的表单，不过也能制作出许多出色的表单页面，本文中的表单都是HTML形式，可以参考这些设计以及HTML页面，同时也能访问相关网站查看这些HTML的写法。通过PS我们可以设计出各种样子的表单，不过其中许多最后都需要转成HTML表单页面，在大多数表单中如果不能基于CSS制作的话就无法在很多场合应用。因此网页设计师在设计表单时需要考虑的问题就是...
html表单制作及实例
专注java二开部署
01-01 1493
这个表单包含了文本输入、电子邮件输入、密码输入、下拉列表和文本框等多种类型的输入。这个表单有两个文本输入字段（名和姓），一个提交按钮，当用户点击提交按钮时，数据会以POST方式发送到服务器的"/submit_form"地址。注意：这只是一个基本的表单，实际上你可能需要包含更多的HTML元素，例如复选框，下拉列表，单选按钮等，以及更复杂的验证和错误处理机制。除了上述的表单元素，HTML表单还可以包括一些用于验证用户输入的元素和特性。属性来定义一个正则表达式，以验证用户输入的数据是否符合特定的格式。
PHP Web表单生成器案例分析
01-19
直接编写HTML表单虽然简单，但修改、维护相对麻烦。 因此，可以利用PHP实现一个Web表单生成器，使其可以根据具体的需求定制不同功能的表单。具体实现需求如下： 使用多维数组保存表单的相关信息 支持的表单项包括...
html5+css3实现酷炫的form表单
11-10
html5+css3实现酷炫的form表单
HTML 使用表单标签实现注册页面的实例代码
12-14
案例说明：　   　- 使用表格实现页面效果  - 超链接不想要有效果，使用href="#" 　- 如果表格里面的单元格没有内容，使用空格作为占位符   　- 使用图片标签提交表单 <input type="image" src="图片的...
html/css 简单的表单实例
01-08
如何实现如下图片的内容？下面我们一起制作该表单页面 如下图是布置的作业 邮箱 * 密码 * 确认密码 * 用户基本信息 性别 男 女
HTML表格习题练习
qq_50589028的博客
02-20 2302
文章目录一、会议日程安排表二、课程表设计 一、会议日程安排表 <!DOCTYPE html> <html> <head> <title>表格</title> </head> <body> <h3 align="center">设置单元格跨列、跨行属性</h3> <center><table border="1" bordercolor="#3366ff"> <capt
html表单代码案例,^html表单&实例.ppt
weixin_34620658的博客
06-10 380
^html表单* 控件组 …… 无属性 …… legend 为 fieldset 定义一个标题 GROUP ONE Field 1A: Field 1B: GROUP TWO Field 2A: Field 2B: * 控件组 * 表单中控件归总 属性值 描述 相关属性设置 text 单行文本框 name，size，maxlength，value radio 单选...
HTML之表单标签及应用案例
Willing卡卡的博客
04-07 378
表单标签 将页面上录入的信息传递到服务端 需要设置name属性； 静态数据：不能和用户进行动态交互的数据； 动态数据：可以和用户以及服务进行交互的数据； 账户:input标签 type=“text” value:默认值 placeholder:提示 ​ 密码:input标签 type=“password” value:默认值 placeholder:提示 ​ 性别:inpu...
Html5的form表单案例
qq_41889034的博客
04-17 4223
form表单 应用场景:提供给用户输入的位置 作用:将客户端用户输入的数据送到服务器端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <!...
html表单的例子
无
05-18 5338
表单的例子                    用  户  名：         密      码：         性      别：男              女         爱      好：打乒乓球                 打篮球                 打羽毛球         文  件  域：         隐  藏  域：   
HTML 表格表单代码实例（个人简介表）
qq_53400553的博客
06-08 5616
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
html制作表单网页案例
weixin_30437337的博客
01-31 1003
html的表格制作案例 有关html <div id="table-info"> <h2>LIFAair LA500参数表 </h2> <table> <tr> <td width="40%">测...
html表单作业练习
努力的凤梨
05-29 2260
淘宝注册表 名字 姓氏 登录名 密码 再次输入密码 电子邮箱 性别 男 女 爱好 运动 聊天 玩游戏 出生日期 年 月 日 阅读淘宝网服务协议 淘宝平台：指包括淘宝网（域名为 ...
表单验证javaScript代码实现案例
04-21
我可以回答你的问题，以下是一个表单验证的 JavaScript 代码实现案例： HTML 代码： ``` <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <button type="submit">Submit</button> </form> ``` JavaScript 代码： ``` const form = document.getElementById('myForm'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); form.addEventListener('submit', (event) => { event.preventDefault(); // 阻止默认表单提交行为 if (nameInput.value === '') { alert('Please enter your name'); } else if (emailInput.value === '') { alert('Please enter your email'); } else if (passwordInput.value === '') { alert('Please enter your password'); } else { alert('Form submitted successfully'); form.reset(); // 重置表单 } }); ``` 这个代码实现了一个简单的表单验证，当用户点击提交按钮时，如果表单未填写完成，则会弹出提示框，让用户填写完整。如果表单填写完成，则会弹出提交成功的提示框，并清空表单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值