Html

最新推荐文章于 2023-02-22 14:53:15 发布
最新推荐文章于 2023-02-22 14:53:15 发布
阅读量589 收藏
点赞数
分类专栏： Jquery\Js\Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013210620/article/details/72669905
版权

表单标签

这里写图片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单标签</title>
    </head>
    <body>
        <form action="#" >
            用户名：<input type="text" /><br />
            密码：<input type="password" /><br />
            确认密码：<input type="password" /><br />
            性别：<input type="radio" name="sex"/>男
            <input type="radio" name="sex"/>女<br />
            爱好：<input type="checkbox" name="hobby"/>钓鱼
            <input type="checkbox" name="hobby"/>打电动
            <input type="checkbox" name="hobby"/>写代码<br />
            头像：<input type="file" /><br />
            籍贯：<select name="province">
                <option>--请选择--</option>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
            </select><br />
            自我介绍：
                <textarea>

                </textarea><br />
            提交按钮：<input type="submit" value="注册"/><br />
            普通按钮：<input type="button" value="zhuce"/><br />
            重置按钮：<input type="reset" />
        </form>
    </body>
</html>


这里写图片描述




<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单标签属性介绍</title>
    </head>
    <body>
        <form action="#" method="get">
            隐藏字段:<input type="hidden" name="id" value="" /><br />
            用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5"  placeholder="请输入用户名"/><br />
            密码：<input type="password" name="password" required="required"/><br />
            确认密码：<input type="password" name="repassword"/><br />
            性别：<input type="radio" name="sex" value="男"/>男
            <input type="radio" name="sex" value="女" checked="checked"/>女<br />
            爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
            <input type="checkbox" name="hobby" value="打电动"/>打电动
            <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
            头像：<input type="file" name="file"/><br />
            籍贯：<select name="province">
                <option>--请选择--</option>
                <option value="北京">北京</option>
                <option value="上海" selected="selected">上海</option>
                <option value="广州">广州</option>
            </select><br />
            自我介绍：
                <textarea name="zwjs">

                </textarea><br />
            提交按钮：<input type="submit" value="注册"/><br />
            普通按钮：<input type="button" value="zhuce"/><br />
            重置按钮：<input type="reset" />
        </form>
    </body>
</html>

例子1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!--2秒后跳转到对应的网址，注意引号-->
  <meta http-equiv="refresh" content="2;URL=http://luffy.oldboyedu.com/">
  <title>京东(JD.com)</title>
  <link rel="icon" href="https://www.jd.com/favicon.ico">
  <!--告诉IE以最高级模式渲染文档-->
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
  <meta name="description" content="老男孩教育Python学院">
</head>
<body>
<h1 id="i1" class="c1 c2 c3" style="color: red">Hello world!</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<a target="_blank" href='https://www.sogo.com/'>click</a>
<img src='https://img10.360buyimg.com/mobilecms/s180x225_jfs/t12787/14/1042360558/46217/eebb98c/5a38bf78N6d477f68.jpg'/>
<img src="meinv.png" alt="这个位置是一个美女的图片" title="美女">
</body>
</html>

例子2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>表单</title>
</head>
<body>

<h3>注册页面</h3>
<form action="http://127.0.0.1:8000/reg/" method="post" enctype="multipart/form-data">
    <p><label for="name">用户名</label>
        <input id="name" type="text" name="username" placeholder="请在这里输入用户名" readonly value="alex"></p>
    <p><label for="name">密码</label>
        <input type="password" name="password"></p>
    <p>手机号<input hidden type="phone" name="mobile"></p>
    <p>数量<input type="number" name="sl"></p>
    <p>邮箱<input type="email" name="email"></p>
    <p>
        <input id="b1" type="checkbox" name="hobby" value="basketball">
        <label for="b1">篮球</label>
        <input type="checkbox" name="hobby" value="football">足球
        <input checked type="checkbox" name="hobby" value="doublecolorball">双色球</p>

    <p>性别 <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        <input checked type="radio" name="sex" value="secret">保密
    </p>
    <p>上传头像
        <input hidden type="file" name="headimg">
    </p>

    <p>从哪儿来<select name="province">
        <option value="">请选择</option>
        <option value="001">河北省</option>
        <option value="002">河南省</option>
        <option value="003">四川省</option>
        <option value="004">湖南省</option>
    </select>
        <select name="city">
            <option value="">---</option>
            <option value="001">河北省</option>
            <option value="002">河南省</option>
            <option value="003">四川省</option>
            <option value="004">湖南省</option>
        </select>
        <select name="area">
            <option value="">---</option>
            <option value="001">河北省</option>
            <option value="002">河南省</option>
            <option value="003">四川省</option>
            <option value="004">湖南省</option>
        </select>
    </p>
    <p>
        <select name="school" multiple size="3">
            <option selected value="000">幼儿园</option>
            <option value="001">私塾</option>
            <option value="002">小学</option>
            <option selected value="003">初中</option>
            <option value="004">高中</option>
        </select>
    </p>

    <p>分组的下拉框
        <select name="" id="" size="6">
            <optgroup label="第一组">
                <option value="000">000</option>
                <option value="001">001</option>
                <option value="002">002</option>

            </optgroup>
            <optgroup label="第二组">
                <option value="010">010</option>
                <option value="011">011</option>
                <option value="012">012</option>
            </optgroup>

        </select>
    </p>

    <p>个人简介:
        <textarea name="memo" cols="30" rows="10">
        </textarea>
    </p>

    <p><input type="checkbox"><a target="_blank" href="https://in.m.jd.com/help/app/register_info.html">同意用户注册条款</a></p>

    <p><input type="text"> <img src="yzm.png" alt="验证码"></p>
    <p><input type="submit" value="S8提交"></p>
    <p><input type="reset" value="重设"></p>
    <input type="button" value="按钮">
</form>


</body>
</html>
易辰_
关注
专栏目录
【避坑指“难”】复选框☑️勾选，按钮可点击。常用于注册页、须知页，同意XXX协议（内含material-ui的坑）
椰卤工程师的个人博客
12-04 1086
PM：“用户需要同意XXX协议，才能点击按钮，否则就给它置灰！！！” 我：你说的对 在项目中经常会有这样需求，特别是在H5移动端，成了家常便饭，今天来详细讲讲代码实现过程。 技术栈：react + material-ui + typescript 实现效果如下 下面放上主要代码，主要逻辑在于复选框checkbox和按钮button，上面的文字布局就不赘述喽。 由于使用的是material-ui，所以部分组件名字和antd是有区别的，大家举一反三就好啦。 部分逻辑会写在注释里！！！ HTML <G.
js实现阅读全部协议后（滚动条拉到底）才允许注册
zag666的博客
12-10 1730
效果截图： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div{ margin:0 auto; width...
html中按钮的几种不同写法
xiaolu3的专栏
01-03 1万+
第一种：在一般情况下按钮提交表单   这样提交按钮是标签 ，如果想换成图片加上样式，把value="提交" 改成value=" "（这样“提交”两个 字就不会显示在这张背景图片的上面）： #button{  background:url(eeo_2.jpg) no-repeat;  width:100px;  height:50px;  b
HTML5知识(3)
peipei11202的博客
02-10 107
HTML5知识(3)
c语言中用html写按钮,HTML按钮代码怎么写？如何写按钮的代码
weixin_36160268的博客
05-23 1117
HTML相信大家很了解了，HTML中的按钮交互功能运用广泛，本篇文章教你如何实现html按钮效果。HTML标签标签定义及使用说明 标签定义一个按钮，在它内部您可以放置文本或图像等内容，这是该元素与使用 元素创建的按钮之间的不同之处。tips：请始终为元素规定 type 属性。不同的浏览器对元素的 type 属性使用不同的默认值。代码如下：button - 编程狮(w3cschool.c...
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-22 7619
一、按钮表单 1、普通按钮 2、提交按钮 3、重置按钮 4、图片按钮 二、文件域
50余款手机页面模版源码html5
11-16
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
html+css网页设计源码(简洁)
12-25
HTML 和 CSS 是构建网页设计的基础，本资源提供了一套简洁的网页设计源码，适合初学者和需要快速搭建页面的开发者。这套源码充分展示了如何使用 HTML 结构元素和 CSS 样式规则来创建一个清晰、易读且具有基本功能的...
初学html
m0_65150162的博客
03-30 309
一 对于写表单时我遇到的问题 1.用户名和密码之类的字无法缩进。 2.在同意协议前方的勾选按钮无法和文字对齐。
html基础元素案例笔记（1）
X
03-08 173
这是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS FlexBox test</title> <link rel="stylesheet" type="text/css" href="./css/index.css"> </head> <body> <h4>青春不常.
勾选同意XXX协议，才能点击提交一类的JS页面，源码如下
何必说
06-29 2万+
&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function disable() { document.getElementById("accept").disabled=true }function enable() { document.getElementById("accept").disabled=f..
js 设计协议只有用户读完才能勾选同意的按钮
weixin_53029195的博客
01-17 4930
js 设计协议只有用户读完才能勾选同意的按钮 1.给出一段html和css代码作为演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #license { width: 400px;
HTML注册时验证是否勾选协议
qq_41255880的博客
10-15 3502
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script> funct...
HTML网页的按钮详解
热门推荐
cnds123的专栏
09-23 2万+
HTML 有多种向网页添加按钮的方法，常用HTML的元素、元素创建按钮，还可以使用元素。
HTML按钮的写法、样式
LILI_JU88的博客
08-26 1万+
新建一个Html文件 在<head>里写入一个内部样式 <style> 第一方法在body写入<button>标签，该标签在HTML5中定义的是一个按钮的 在<button>标签内写入文字或设置样式,不设置可能会到导致<button>在页面中显示不出来 样式主要以尺寸、字体、背景 button{ width: 60px; height: 20px; font-size: 12px; text-decoration: underl...
html怎样设置同意服务条款,用户使用协议及服务条款.html
weixin_39663258的博客
06-16 1757
用户使用协议及服务条款$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getRel...
HTML圣诞树代码分享
"圣诞节快乐的圣诞树.txt" 是一个HTML文件，内容是一个简单的圣诞树页面。这个页面在圣诞节时可以用来展示和分享，通过更改文件扩展名为.html即可在浏览器中打开。 该HTML代码中，主要包含以下几个关键知识点： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值