HTML5---表单语法学习

最新推荐文章于 2024-07-20 13:43:49 发布

AO_AEO

最新推荐文章于 2024-07-20 13:43:49 发布

阅读量197

点赞数

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/AO_AEO/article/details/106709817

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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="post">

<!--    文本输入框<input type="text">-->
<!--
value="AOAEO"   默认初始值
maxlength="8"   最长能写几个字符
size="30"       文本框的长度
-->
    <p>名字：<input type="text" name="username"></p>

<!--    密码框：<input type="password" name="pwd">-->
    <p>密码：<input type="password" name="pwd"></p>

<!--    radio单选框标签，必有value-->
<!--    input type="radio"
        value：单选框的值
        name： 表示组
-->
    <p>性别:
        <input type="radio" value="boy"name="sex"/>男
        <input type="radio" value="girl"name="sex" checked/>女
    </p>
    
<!--    多选框    -->
    <p>爱好：
        <input type="checkbox" value="sleep"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="../resources/image/回首.jpg">-->

    </p>

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

<!--滑块-->
    <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" value="清空表单">
    </p>
</form>
</body>
</html>

10.1表单的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的应用</title>
</head>
<body>

<p>名字：
<!--    只读readonly-->
    <input type="text" name="username" value="admin"readonly>
</p>

<p>密码：
    <input type="password" name="pwd" hidden>

</p>

<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>

<p>
<!--    禁用disabled-->
    <input type="checkbox" name="sex" value="boy"checked disabled/>男
    <input type="checkbox" name="sex" value="girl"/>女
</p>

</body>
</html>

AO_AEO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5---表单语法学习

10.表单语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录注册</title></head><body><h1>注册</h1><!--表单formaction：表单提交的位置，可以是网站，也可以是一个请求处理地址method：post ，get 提交方
复制链接

扫一扫

专栏目录