html里关于表单的一些操作代码

最新推荐文章于 2025-07-30 12:10:07 发布

原创最新推荐文章于 2025-07-30 12:10:07 发布 · 8.4k 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了HTML中表单的各种操作，包括创建表单元素、设置输入验证、处理表单提交等关键知识点，并提供了丰富的代码示例，帮助开发者更好地理解和应用HTML表单。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>


<h1>注册</h1>

<!--表单form
action:表单提交的位置，可以是网站，也可以说是一个请求处理地址
method:post  get提交方式
-->
<form action="1，我的第一个网页.html" method="post">
    <!--    文本输入框：input type ="text‘
    value  默认初始值
    maxlength = "8"  最长能写几个字符
    size ="30" 文本框的长度
    -->
    <p>名字：<input type="text" name="username" value="拟录取" maxlength="8" size="30"></p>
    <!--    密码：input type ="password"-->
    <p>密码：<input type="password" name="pwd">
    </p>


    <p>性别：
<!--        单选框-->

        <input type="radio" value="boy" />男  <!--   //如果name是一样则二选一-->
        <input type="radio" value="girl" />女
    </p>
<!--    多选框
input type ="checkbox"


-->

<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>



<!--    按钮-->

    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
<!--        <input type="image" src="../resources/image/1.jpg">-->

    </p>



<!--    下划框-->

<p>国家：
    <select name="列表名称" >
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="yindu" selected>印度</option>
        <option value="eth">瑞士</option>

    </select>




</p>

<!--    文本域-->
    <p>反馈：
        <textarea name="textarea"  cols="30" rows="10">文本内容</textarea>


    </p>

<!--    文件域
input type ="file" name ="files"
-->
<p>
    <input type="file" name="files">
  <input type="button" value="上传" name="upload">
<!--    value就是，默认值-->
</p>



<!--    邮箱验证-->

    <p>邮箱:
        <input type="email" name="email">

    </p>

<!--URL-->
    <p>URL:
        <input type="url" name="url">

    </p>


<!--    数字-->

    <p>商品数量
        <input type="number" name="num" max="100" min="10" step="1">


    </p>


<!--    滑块
input type ="range"
-->
    <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">

    </p>

<!--    搜索框-->

    <p>搜索：
        <input type="search" name="search">


    </p>


    <p><input type="submit">
        <input type="reset"></p>


</form>


</body>
</html>