简单表单内容的练习

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量73 收藏
点赞数 1
分类专栏： html 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69821704/article/details/128536597
版权

1、完成如下表单练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" width="500px" height="300px" align="center">
        <tr align="center">
            <td colspan="4">教员搜索</td>
        </tr>
        <tr>
            <td>搜索类型</td>
            <td>
                <form action="">
                    <select name="" id="">
                        <option value="搜索教员信息">搜索教员信息</option>
                        <option value="农夫山泉">农夫山泉</option>
                        <option value="怡宝">怡宝</option>
                        <option value="百岁山">百岁山</option>
                    </select>
                </form>
            </td>
            <td>教员身份</td>
            <td>
                <form action="">
                    <select name="" id="">
                        <option value="不限">不限</option>
                        <option value="Java">Java</option>
                        <option value="python">python</option>
                        <option value="c++">c++</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <form action="">
                    <select name="" id="">
                        <option value="不限">不限</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="深圳">深圳</option>
                    </select>
                </form>
            </td>
            <td>性别</td>
            <td>
                <form action="">
                    <input type="radio" name="sex" value="man">男
                    <input type="radio" name="sex" value="woman">女
                </form>
            </td>
        </tr>
        <tr>
            <td>学习科目</td>
            <td colspan="3">
                <form action="">
                    <select name="" id="">
                        <option value="从以下科目中选择">从以下科目中选择</option>
                        <option value="Java">Java</option>
                        <option value="python">python</option>
                        <option value="c++">c++</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td>学习</td>
            <td colspan="3">
                <form action="">
                    <input type="text" placeholder="请输入学习的内容">
                </form>
            </td>
        </tr>
        <tr>
            <td>专业</td>
            <td colspan="3">
                <form action="">
                    <input type="search" name="搜索" placeholder="请输入专业">
                    <input type="submit" value="搜索">
                </form>
            </td>
        </tr>
    </table>
</body>
</html>

 

2、完成如下练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center">
        <tr>
            <td align="right">姓名：</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password" name="密码"></td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td><input type="password" name="确认密码"></td>
        </tr>
        <tr>
            <td align="right">密码提示问题：</td>
            <td>
                <form action="">
                    <select name="" id="">
                        <option value="请选择一个问题">请选择一个问题</option>
                        <option value="你的生日">你的生日</option>
                        <option value="你的手机号">你的手机号</option>
                        <option value="你的姓名">你的姓名</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td align="right">密码提示答案：</td>
            <td><input type="text" name="提示答案"></td>
        </tr>
        <tr>
            <td align="right">性别：</td>
            <td>
                <input type="radio" name="sex" value="man">男
                <input type="radio" name="sex" value="woman">女
            </td>
        </tr>
        <tr>
            <td align="right">年龄：</td>
            <td><input type="number" name="age" min="1" max="120"></td>
        </tr>
        <tr>
            <td align="right">籍贯：</td>
            <td>
                <form action="">
                    <select name="" id="">
                        <option value="请选择">请选择</option>
                        <option value="甘肃省">甘肃省</option>
                        <option value="上海市">上海市</option>
                        <option value="江苏省">江苏省</option>
                    </select>
                    省/直辖市
                    <select name="" id="">
                        <option value="请选择">请选择</option>
                        <option value="兰州市">兰州市</option>
                        <option value="上海市">上海市</option>
                        <option value="苏州市">苏州市</option>
                    </select>
                    市
                </form>
            </td>
        </tr>
        <tr>
            <td align="right">爱好：</td>
            <td>
                <input type="checkbox" name="aihao" value="game">游戏
                <input type="checkbox" name="aihao" value="movie">电影
                <input type="checkbox" name="aihao" value="computer">上网
            </td>
        </tr>
        <tr>
            <td align="right">个人介绍：</td>
            <td>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">上传头像：</td>
            <td><input type="file" name="文件"></td>
        </tr>
        <tr>
            <td align="right"></td>
            <td>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</body>
</html>

 

༨Rꫀꪖᦔᵧₒᵤ11
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue面试题之二：路由 vue-router 面试题
Arthas_Xue的博客
09-19 1万+
2. vue路由面试题 1. mvvm框架是什么？ mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的 MVVM是Model-View-ViewModel的缩写，Model代表数据模型负责业务逻辑和数据封装，View代表UI组件负责界面和显示，ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层...
表单练习HTML5
LaoXieyyds的博客
07-21 789
HTML5表单练习，基础部分
2013-9-21 任务
a468903507的专栏
09-20 785
1.通讯录管理 1.1通讯录导入: 姓名    手机号 1.2通讯录导出: 对所有选择的成员所有的通讯录记录导出 （检查手机号）   2.角色管理 权限的新增、修改、禁用、授权、查询   3.短信发送 选择人员、导入号码、清空号码、选择模板、发送； 对需要定时发送的短信进行参数设置； 可对设置的关键字、敏感字自动进行提醒、过滤； 1个datagrid框放置发送人员及手
vue基础 - 02 （双向数据绑定、实时监听输入框、键盘事件监听、watch监听器、单选框、下拉选框、多选框、多选框单独使用、动态样式class/style）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-03 1093
1、双向数据绑定 方向1 - 数据绑定到DOM元素上 方向2 - DOM变化更新绑定的数据 表单元素：输入框，单选框，多选框...，用户可以操作来修改其值 -- 把用户操作的值更新给数据 v-model：数据绑定值的同时，DOM变化也会修改变量，用来快速获取form表单元素的值 2、实时监听输入框 @input：输入框内容变化时触发 <div id="app"> &...
form表单数字校验（二）——邮箱校验-当前页面
weixin_44867717的博客
11-06 1076
form表单数字校验（二）——邮箱校验-当前页面 效果 代码 index.vue <el-form-item v-if='!isDisabled' label='邮箱'> <el-input v-model.trim='ruleForm.email' class='n_form_is' ></el-input> </el-form-item> <el-form-item v-else label
前端总结2
EstherQKing的博客
10-31 304
使用表单标签，与用户交互 - 使用创建表单 1.form：标签是成对出现的，以form开始，以/form结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method ： 数据传送的方式（get/post） 文本输入框、密码输入框 1、type： 当type="text"时，输入框为文本输入框; 当type="password"时, 输入框为密码输入框。 2、name：为文本框命名，以备后台程序ASP 、PHP使用。 3、value：为文本输入框
HTML表单简单练习
あの花
04-14 834
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单</title> </head> <body bgcolor="deepskyblue"> &...
web表格表单基本练习
qalx9的博客
11-07 241
完成以上图片的展示内容。
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2517
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
jsp 简单点表单练习
05-26
这是一个很简单的表单练习。都是些最基本的东西，不过应该挺有用 的。希望对大家有用。
表单练习与知识点.7z
08-24
本文将深入探讨表单练习与相关的知识点，旨在帮助初学者快速理解和掌握前端表单的设计与实现。 首先，我们要理解HTML中的表单元素。`<form>`标签用于创建一个表单，它可以包含各种输入控件，如`<input>`、`...
简单的表单验证
12-23
在网页开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期的格式和标准，从而提高数据质量和用户体验。...通过实践“简单的表单练习”文件，开发者可以深入理解这一过程，并进一步提升自己的技能。
Java 的Servlet练习
09-26
【Java的Servlet练习】是Java Web开发中的一个基础部分，主要涉及如何通过HTML页面与Java后端进行交互，从而在...这个"简单练习"对于初学者来说是一个很好的起点，通过实践，你可以更好地理解Java Web开发的各个环节。
javascript制作的简单注册模块表单验证
10-24
通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段...使用起来很简单，大家拿回去自由扩展吧
html 关闭信息窗口
cuisidong1997的博客
07-14 326
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 918
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 665
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-16 708
本文主要介绍如何用DHTMLX Gantt将上下文菜单集成到JavaScript Gantt图中，欢迎下载最新版组件体验！
dhtmlx-gantt甘特图数据展示
dy1717的博客
07-15 275
甘特图数据展示
原生html贪吃蛇？
weixin_52236586的博客
07-18 105
【代码】原生html贪吃蛇？

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值