HTML-form表单自学笔记Ⅴ

最新推荐文章于 2024-07-14 14:30:45 发布
最新推荐文章于 2024-07-14 14:30:45 发布
阅读量172 收藏
点赞数
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HAOXUAN_/article/details/106798096
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table align="center">
        <thead>
            <tr>
                <th colspan="2">注册信息</th>
            </tr>
        </thead>
        <tr>
            <td align="right" width="100">账号：</td>
            <!--文本框
            name    表示表单元素名称，以后想携带数据到后台，必须设置name
            value   是初始值
            checked 表示是否选中
                checked="checked"   此时可以省略值 checked
                checked="true"      默认选择
                checked="false"     默认不选择
            selected    下拉列表选项是否选中
            readonly    只读
            disabled    不能被操作，而且不能被提交
            maxlength   输入最大长度
            -->
            <td><input type="text" name="UserName" value="请输入账号" maxlength="11" readonly></td>
        </tr>
        <tr>
            <td align="right" width="100">密码：</td>
            <!--密码框-->
            <td><input type="password" name="pwd" id="" value="请输入密码" disabled></td>
        </tr>
        <tr>
            <td align="right" width="100">性别：</td>
            <td>
                <!--单选框    name一定要写而且相同才能达到互相排斥，只能选择一个
                
                -->
                <input type="radio" checked value="male" name="sex" id="">男
                <input type="radio" value="female" name="sex" id="">女
            </td>
        </tr>
        <tr>
            <td align="right" width="100">所在城市：</td>
            <td>
                <!--下拉列表-->
                <select name="city" id="">
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right" width="100">擅长：</td>
            <td>
                <!--复选框-->
                <input type="checkbox" checked name="zhiye" id="">前端
                <input type="checkbox" name="zhiye" id="">后端
                <input type="checkbox" name="zhiye" id="">测试
                <input type="checkbox" name="zhiye" id="">运维
            </td>
        </tr>
        <tr>
            <td></td>
            <!--上传文件-->
            <td><input type="file" name="resume" id=""></td>
        </tr>
        <tr>
            <!--文本域  textarea    cols：列    rows ：行-->
            <td align="right" valign="top">选择理由：</td>
            <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
        </tr>
        <tr>
            <!--隐藏域    希望前端带数据到后台，不展示在页面当中-->
            <td><input type="hidden" name=""></td>
        </tr>
        <tr>
            <!--普通按钮 -->
            <td align="center"><input type="button" value="普通按钮"></td>
            <!--submit按钮具有提交的作用，他会把表单的数据通过 name携带到一个地址里面去-->
            <td><input type="submit" value="确定"></td>
            <!--reset重置-->
            <td><input type="reset" value="重置"></td>
        <tr>
            <td align="center"  colspan="2">
                <!--图片提交按钮-->
                <input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
            </td>
        </tr>
    </table>
</body>

</html>
@浩轩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
斑码教育大前端课堂笔记-html第四天
10-11
10. **表单元素**：HTML5中的<form>、、、、等用于创建用户交互的表单，掌握各种输入类型（text、email、password等）和表单验证规则。 11. **CSS3初步**：虽然主要在第五天讲授，但笔记中可能已经提及了CSS3的一些...
form.html（表单练习）
07-22
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit
HTML表单简单练习
あの花
04-14 834
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单</title> </head> <body bgcolor="deepskyblue"> &...
html_day03_form练习
YJ_meditation的博客
07-17 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0717表单练习</title> </head> <body> <fieldset> <legend>注册界面</legend> <!-- 注意：提交要有两个注意点 1.注意点1：在form中要有action属性
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2514
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
HTML5练习 - 表单练习
有时四月会降雪的博客
02-29 967
HTML5 练习题 - 表单练习 效果展示 HTML <form> <fieldset> <!-- caption --> <legend>学生档案</legend> <!-- userName --> <label for="userNam...
Ahmad-Maulana:编码HTML网站
03-27
此外，课程可能还会介绍表格`<table>`、表单`<form>`和框架`<iframe>`等更复杂的功能。 HTML5是当前广泛使用的版本，它引入了一些新特性，如音频`<audio>`和视频`<video>`标签，以及离线存储`<html manifest>`等。...
jfinal自学笔记
06-17
当用户在页面上填写表单并提交时，如 `<form action="/student/save" method="post">`，数据会被发送到 `/student/save` 地址。在 `web.xml` 中，需要配置 JFinal 过滤器，确保所有请求都被 JFinal 处理： ```xml...
Struts2自学笔记——Struts2的文件上传
04-18
这篇自学笔记将深入探讨Struts2的文件上传机制。 1. **文件上传原理** 文件上传是基于HTTP协议的POST请求实现的。在HTML表单中，通过`<input type="file" />`元素让用户选择本地文件。当用户提交表单时，浏览器会...
SAP BC480 课程中文自学笔记
12-24
BC480: Creating PDF-based Print Forms 基于 PDF 的打印表单
HTML 表单的练习记录篇
追求，成长
12-26 4062
前言： 近期的工作中是负责公司网站的维护，所以就得学习Web前端的知识…时常忘记，所以记录下，也算是学习Web的一个开篇吧！废话不多说，coding … Ⅰ.简述表单相关的标签：form、fieldset、legend、table、tr、td、input、select、option、textarea 等；表单相关标签对应的部分属性： 标签 元素
纯html的form表单实操练习
m0_64336780的博客
04-05 9167
纯html的form表单实操练习
玩转html5(三)---智能表单（form），使排版更加方便
iteye_8029的博客
04-28 313
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;form表单学习笔记&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
html练习
热门推荐
从入门到放弃系列
03-12 1万+
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt; &amp
HTML5 Input 验证身份证
cuisidong1997的博客
07-14 99
对于验证身份证号码，我们可以使用"type"属性为"text"的input元素，并通过"pattern"属性来指定验证的正则表达式。在许多网站或应用程序中，我们常常需要验证用户输入的身份证号码的有效性。本文将介绍如何使用HTML5的input元素来验证身份证号码，并提供相应的代码示例。通过使用HTML5的input元素和正则表达式，我们可以方便地验证用户输入的身份证号码的有效性。在本文中，我们介绍了身份证号码的正则表达式，并提供了相应的代码示例。身份证号码的格式包括18位和15位两种。
html5——表单
jiuyuexixi的博客
07-10 1084
html5——表单
Java基础入门：掌握基本语法与概念2024最新0基础！！！易懂！！！.md
最新发布
07-14
Java编程语言的基础语法要点。首先介绍了数据类型与变量的概念，包括整型、浮点型、字符型和布尔型，每种类型的定义和示例代码都有详细解释。其次，讨论了运算符与表达式的使用，包括算术运算符、赋值运算符、关系运算符和逻辑运算符，每种运算符的功能和示例展示。接着，文章深入探讨了控制流程，包括条件语句（if-else、switch-case）和循环语句（for循环、while循环、do-while循环），每种语句的用法和示例演示。随后，文章详细讲解了方法的定义与调用，展示了如何定义带有参数和返回值的方法，并给出了实际使用的示例。最后，文章介绍了Java中的数组与集合，包括如何定义和初始化数组，以及如何使用列表（List）作为集合类型存储数据。字符串处理也得到了关注，包括字符串的拼接、长度、比较、查找和替换等操作。整篇文章通过清晰的教程、详细的示例代码和逐步解释，帮助读者建立起对Java基础语法的全面理解和实际运用能力。
.archivetemp实物图.jpg
07-14
.archivetemp实物图.jpg
好看的手机html-form表单
06-07
好看的手机html-form表单应该是具有良好的美学设计，符合人类视觉习惯和用户体验设计原则的表单。其中，要素包括以下几个方面。 首先是整体布局和排版，尽量采用简洁明了的排版设计，避免过多繁琐细节和复杂的布局...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值