HTML表单总结

最新推荐文章于 2022-10-06 20:27:27 发布

思诚代码块

最新推荐文章于 2022-10-06 20:27:27 发布

阅读量565

点赞数

分类专栏： HTML 实战讲解文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122666590

版权

HTML 实战讲解专栏收录该内容

14 篇文章 0 订阅

订阅专栏

大家好，今天给大家分享一下HTML表单总结

上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交位置，可以使网站，也可以是一个请求处理地址
method : post,  get提交方式
get方式提交：我们URL当中看见我们提交的信息，不安全，但是它比较高效
post：比较安全，可以传输大文件，可以弥补get方式的安全隐患-->





<!--input type="text"   //输入文本框
 name="username
  value="大庆好帅"    //默认初始值
   maxlength="8"       //最长可以写几个字符
   size="30"          文本框的长度
       -->
<form action="第一个.html" method="post">
    <!-- 文本输入框：input type=“text”              <p>名字：<input type="text" name="username" value="大庆好帅" maxlength="8" size="30"></p>




    <p>名字：<input type="text" name="username" value="大庆好帅" maxlength="8" size="30"></p>
    <!--    <p>名字：<input type="text" name="username" placeholder="请输入用户名" maxlength="8" size="30"></p>    //浅色字提醒  -->
    <!--    密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" value="请输入密码" maxlength="6" size="10"></p>
    <!-- <p>密码：<input type="password" name="pwd" value="请输入密码"readonly maxlength="6" size="10"></p>
    //在这个位置上加上readonly 就可以让密码框只能读，不能改-->
    <!--<p>密码：<input type="password" name="pwd"  value="123456" maxlength="6" size="10"></p>    -->
    <!--    在values前面加上hidden 就可以隐藏密码框
    -->
    <!--  <p>密码：<input type="password" name="pwd" hidden value="123456" maxlength="6" size="10"></p>   //默认密码是123456，隐藏的   -->
    <p>
        <input type="submit" >
        <!--加上disabled 表示我们不能提交    -->
        <input type="reset">
    </p>
    <p>
        <input type="radio" value="boy" name="sex"checked disabled/>男
        <!--在sex后面加上checked disabled ,表示不能选男的，只能选女的        -->
        <input type="radio" value="girl"name="sex"/>女
        <!-- 在男女前面加上name="sex"之后，我们就可以选一个了，否侧的话，俩个都能选，这样就起不到效果了     -->
    </p>
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code"  name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby"> 聊天
        <input type="checkbox"value="game" name="hobby"> 游戏
    </p>
    <!--按钮  input type="button"    //普通按钮
             input type="image"      //图像按钮
             inp
             ut type="submit"      //提交按钮
            input type="reset"       //重置按钮
              -->
    <p>按钮：
        <input type="button"name="btn1"value="点击变长">
        <input type="image"src="../resourse/images/QQ截图20211026123053.png ">

    </p>

    <!-- 下拉框，列表框  -->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth"selected>瑞士 </option>
            <option value="yingdu">印度</option>
        </select>

    </p>
    <!-- cols="50 " rows="10   -->
    <p>反馈：
        <textarea name="textarea" cols="50 " rows="10">文本内容</textarea>
    </p>
    <!--文件域
    input type="file" name="files"
       -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--    邮件验证-->
    <p>邮箱：
        <input type="email" name="email">

    </p>
    <!--    url-->
    <p> url:
        <input type="url" name="url" required>
        <!--  requred 表示不能为空        -->
    </p>
    <!--数字-->
    <p> 数字：
        <input type="number" nmae="num" max="100" min="0" step="10" >
    </p>
    <!--滑块    -->

    <p>音量：
        <input type="range" nmae="voice" max="100" min="0" step="2" >
    </p>
    <!--   搜索 -->
    <p>搜索：
        <input type="search" name="search" >
    </p>
    <!--    增加鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>

</form>
<!--单选框标签
     input type="radio"
      value :单选框的值
      name：表示组
      -->
<!--表单元素格式
type：指定元素的类型。text，password，checkbox ,submit,reset,file,hidden,image,button,默认值为text
name :指定表单元素的名称
value：元素初始值，type为radio时必须指定一个值
size：指定表单元素的初始宽度。当type为text或者password时表单元素的大小以字符为单位
对于其他类型，宽度以像素为单位
maxlength:type为text或者password时，输入的最大字符串
checked：type为radio或者checkbox时，指定按键是不是被选定-->

</body>
</html>

看结果：
在这里插入图片描述

在这里插入图片描述
这个代码是前面表单所有的全部，代码的注释也是非常的清楚，本来可以一下子全部讲完，但是总体的体量有点大，如果一下子，会非常乱

关于HTML表单总结就到这里了，谢谢大家

思诚代码块

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML表单总结

大家好，今天给大家分享一下HTML表单总结上源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录注册</title></head><body><h1>注册</h1><!--表单formaction：表单提交位置，可以使网站，也可以是一个请求处理地址meth
复制链接

扫一扫