HTML学习 —常用表单及简单实例

最新推荐文章于 2024-01-01 08:00:00 发布
原创 最新推荐文章于 2024-01-01 08:00:00 发布 · 1.9k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #学习 #前端

这篇博客介绍了HTML中的常用表单元素，并通过代码展示了简单的实例，帮助读者理解并应用到实际的前端开发中。

文章目录

常用表单介绍

show code：

<!DOCTYPE html>
<html lang="zh-CN">

<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>常用表单</title>
</head>

<body>
    <fieldset>
        <form action="" method="get">
            性别：
            <label for="male">男</label>
            <input type="radio" name="gender" id="male" value="1">
            <label for="female">女</label>
            <input type="radio" name="gender" id="female" value="0" checked>
            <br>
            爱好：
            <label for="swimming">游泳</label>
            <input type="checkbox" name="hobby" id="swimming" value="swimming">
            <label for="running">跑步</label>
            <input type="checkbox" name="hobby" id="running" value="running" checked>
            <label for="playing">玩</label>
            <input type="checkbox" name="hobby" id="playing" value="playing">
            <br>
            籍贯：
            <select name="hometown" id="hometown">
                <option value="bj">北京</option>
                <option value="sh" selected>上海</option>
                <option value="gz">广州</option>
            </select>
            <br>
            水果：
            <select name="fruits" id="fruits" multiple>
                <option value="apple">苹果</option>
                <option value="banana" selected>香蕉</option>
                <option value="pear">梨</option>
            </select>
            <br>
            slogan:
            <textarea name="slogan" id="slogan" cols="30" rows="10"></textarea>
            <br>
            年龄：
            <input type="number" name="age" id="age">
            <br>
            时间：
            <input type="time" name="time" id="time">
            <br>
            周：
            <input type="week" name="week" id="week">
            <br>
            日期：
            <input type="date" name="date" id="date">
            <br>
            datetime-local:
            <input type="datetime-local" name="datetime-local" id="datetime-local">
            <br>
            URL:
            <input type="url" name="url" id="url">
            <br>
            邮箱：
            <input type="email" name="email" id="email">
            <br>
            电话：
            <input type="tel" name="tel" id="tel">
            <br>
            文件：
            <input type="file" name="file" id="file">
            <br>
            预定义控件：
            <input list="browers" name="brower">
            <datalist id="browers">
                <option value="Internet Explorer">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
            </datalist>
        </form>
    </fieldset>
</body>

</html>

实际效果如下：在这里插入图片描述

简单实例

show code：

<!DOCTYPE html>
<html lang="zh-CN">

<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>kgc登录页面</title>
    <style>
        div {
            float: left;
        }

        .one {
            padding-left: 200px;
            width: 400px;
            height: 700px;
            margin-top: 100px;
        }

        .two {
            width: 500px;
            height: 700px;
            margin-top: 100px;
        }

        .title {
            margin-top: 100px;
            font-size: medium;
        }

        .account {
            padding-left: 120px;
        }

        .phone {
            padding-left: 60px;
        }

        .form {
            text-align: center;
            margin-top: 30px;
        }

        .input {
            width: 250px;
            height: 40px;
            margin-top: 20px;
            border-radius: 5px 5px 5px 5px;
        }

        .value {
            background-color: green;
            font-size: larger;
            color: azure;
            width: 250px;
            height: 40px;
            margin-top: 20px;
            border-radius: 10px 10px 10px 10px;
        }

        .other {
            text-align: center;
            margin-top: 70px;
        }

        .img {
            padding-left: 175px;
            width: 150px;
        }

        a {
            line-height: 150px;
            text-decoration: none;
            color: green;
        }

        .find {
            padding-left: 150px;
        }
    </style>
</head>

<body>
    <div class="one">
        <img src="./img/03.png" alt="" width="400px">
    </div>
    <div class="two">
        <p class="title">
            <span class="account">账号密码登录</span>
            <span class="phone">手机快捷登录</span>
        </p>
        <form action="https://www.kgc.cn/" method="get" class="form">
            <input type="text" name="account" id="account" placeholder="请输入账号" class="input">
            <br>
            <input type="password" name="password" id="password" placeholder="请输入密码" class="input">
            <br>
            <input type="submit" value="登录" class="value">
        </form>
        <p class="other">其他登录方式</p>
        <img src="./img/04.png" alt="" class="img">
        <br>
        <span class="find">
            登录代表已同意
            <a href="https://www.ekgc.cn/help/service.shtml">用户服务条款</a>
        </span>
    </div>
</body>

</html>

效果如下：
在这里插入图片描述

查看更多表单标签及实例应用请点击！！！！

HTML实例--制作表单
zxn200125的博客
10-05 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...
前端开发HTML基础学习笔记：涵盖HTML标签、浏览器内核、Web标准及表单元素详解
最新发布
04-30
②掌握HTML常用标签的具体应用场景，如表格、列表和表单的设计；③了解HTML5的新特性及其在现代Web开发中的应用；④理解浏览器的工作原理，包括页面加载和渲染的过程。 其他说明：文档不仅提供了理论知识，还包含了...
html的form表单实例介绍
12-23
html的form表单中button等实例介绍
HTML表格代码的示例
12-20
这是利用HTML表格代码制作出来的一个表格。
Html表单和表格例子
幸福诗歌的博客
04-28 1万+
Html表格和表单制作： 1.关于表格： 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。 跨行：colspan 跨列：rowspan 2.关于表单： 输入 多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： 文本域（Text Fields） 当用户要
html实例，实现表单
aigo_2021的博客
03-29 7878
1.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center" bgcolor="#F0F8FF" borderColor="blue"> <tr> &l.
精选资源
HTML 学习总结2 框架 表单
01-08
`<input>`标签是最常用的表单元素，其`type`属性决定了输入类型，如文本（`text`）、密码（`password`）、复选框（`checkbox`）和单选按钮（`radio`）。例如： ```html 请选择餐饮设置类型： 添加食品 查询食品...
整理HTML5中表单的常用属性及新属性
09-28
本文将详细解释这些新属性，并结合实例说明其用法。 首先，我们来看`autocomplete`属性。它用于指定表单元素是否应该开启自动完成功能。当用户开始在一个自动完成域内输入时，浏览器应显示一个下拉菜单，其中包含...
js表单验证实例，HTML文件,javascript常用表单验证
10-13
js表单验证实例，HTML文件,javascript常用表单验证： 账号、密码、身份证等
HTML 使用表单标签实现注册页面的实例代码
09-22
它可以包含输入元素（如单选按钮、复选框、文本输入框等），标签的action属性定义了提交表单时数据应该发送到哪个地址，而method属性定义了数据如何发送，常用的方法有"post"和"get"。 2. 标签：这是用于创建各种...
HTML（之表单的）案例
ChengMeng11的博客
03-14 1257
1、表单的基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <f...
【实用】HTML的简单示例（表单篇）
Mankey_24的博客
10-09 6527
效果如下： 代码内容： <html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead>&
html 表单实例
LIN的博客
09-07 280
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html表单</title> </head> <body> <div align="center" > 表单 <form action=...
HTML表单示例
Useless_csdn的博客
01-11 3230
表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成，即表单标签、表单域、表单按钮。 表单标签：用于表面表单的范围，位于表单标签中的元素将被提交 语法：&lt;form&gt;&lt;form&gt; 属性：Method,Enctype,action 表单域：包括文本框，密码框等多种类型 语法：&lt;input……/&gt; 属性：type,name,value 种类：文...
html表单实现小案例
异想实验室|Arduion|ESP8266|Micro Python|
02-22 253
html表单实现方法
常用表单介绍
古影轩
02-13 837
<br />1.extjs文本框-普通文本框之间的对比<br />var textfield = new Ext.TextField({<br /> id:'sigle',//在次页面的唯一标示<br /> name:'textname',//次于id的标示属于是页面的二级标示<br /> fieldLabel:'名称',//显示标签的名称<br /> allowBlank:false,//不允许为空<br /> regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/
html表单制作及实例
专注java二开部署
01-01 3187
这个表单包含了文本输入、电子邮件输入、密码输入、下拉列表和文本框等多种类型的输入。这个表单有两个文本输入字段（名和姓），一个提交按钮，当用户点击提交按钮时，数据会以POST方式发送到服务器的"/submit_form"地址。注意：这只是一个基本的表单，实际上你可能需要包含更多的HTML元素，例如复选框，下拉列表，单选按钮等，以及更复杂的验证和错误处理机制。除了上述的表单元素，HTML表单还可以包括一些用于验证用户输入的元素和特性。属性来定义一个正则表达式，以验证用户输入的数据是否符合特定的格式。
HTML 表单
diaojilu3861的博客
09-13 241
HTML 表单包含表单元素。 <form> 元素定义 HTML 表单 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 HTML 表单用于搜集不同类型的用户输入。 <form> . form elements . </form> <input>元素是最重要的表单元素。 &l...
Html的表单
热门推荐
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
HTML常用标签学习总结与实例详解
本文档作为初学者学习HTML的总结性资料，系统梳理了HTML的核心概念、常用标签及其实际应用，内容结构清晰、实例丰富，适合刚接触网页设计的学习者阅读与实践。文档以“笔记形式”呈现，虽非完全体系化，但聚焦于实际...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chenlei...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值