10_学习表单

2022/8/5 23:23:57

编程Tag： 注册表单 url 邮箱 10 学习

本文主要是介绍10_学习表单，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

<h1>注册</h1>


<!--表单form

action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get提交方式
       get方式提交:我们可以在url中看见我们提交的信息，不安全，高效
       post：比较安全，传输大文件。

-->

<form action="1.我的第一个网页.html"method="get">
    <!--文本输入框：input type=“text”
    value="i love you"   默认初始值
    maxlength="15"       最长能写几个字符
    size="30"            文本框的长度
    readonly：只读
    hidden:隐藏
    placeholder:提示信息
    required：非空判断

    -->
    <p>名字：<input type="text"name="username"placeholder="请输入用户名"required></p>

    <!--密码框：input type=“password”-->
    <p>密码：<input type="password"name="pwd"placeholder="请输入密码"></p>


    <!--单选框标签
    input type=“radio”
    value：单选框的值
    name：表示组（如果为同一个组在男女中只能选择一个；如果为两个组则在男女中可以同时选择两个。）
    checked:默认选中
    disabled:禁用
    -->

    <p>性别：

        <input type="radio" value="boy" name="sex"checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女

    </p>

    <!--多选框
      input type="checkbox"
      checked:默认选中
        -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="code" name="hobby"checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>

    <!--按钮
    input type="button"   普通按钮
    input type="image"    图像按钮
    input type="submit"   提交按钮
    input type="reset"    重置按钮
    -->
    <p>按钮：
        <input type="button"name="btn1"value="点击变帅">
        <input type="image"src="../resource/image/1.png"width="200px"height="200px">

    </p>

    <!--下拉框，列表框
    selected:默认选中
    -->

    <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">
    </p>
    <!--数字验证-->
    <p>数字：
        <input type="number"name="num"max="100"min="0"step="10">
    </p>


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

    <!--搜索框-->
    <p>搜索：
        <input type="search"name="search"id="mark">
    </p>
    <p>
        <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text">
    </p>
   <p>
       <input type="submit">
       <input type="reset"value="清空表单">
   </p>
</form>
</body>
</html>

结果展示

这篇关于10_学习表单的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

10_学习表单

相关编程文章