22表单——HTML

最新推荐文章于 2024-09-02 20:34:02 发布

StudiousTiger

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量79

点赞数

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/m0_45067620/article/details/107168898

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        表单：
            -现实中用于提交数据
            -网页中的表单————将本地的数据提交给远程的服务器
     -->
     <!-- 创建表单
            action 表单要提交的服务器地址    
    -->

    <!-- 因为我们没有服务器我们先创建体格临时的html用于接收 -->
     <form action="../target.html">
        <!-- 添加表单项 -->
        <!-- 
            autocomplete="off" 关闭自动补全，默认为开启
            readonly    将表单项设置为只读，数据会提交
            disable     将表单项设置为禁用，数据不会提交
            autofocus   输入完后光标自动下移
         -->
        <!-- 文本框 
            注意：数据要想提交给服务器，必须给元素指定一个name，name值自定义
                autocomplete(自动完成，自动补全)
                 开启autocomplete,会显示以往输入的记录
                 关闭autocomplete或不写,不会显示以往输入的记录
        -->
        文本框：<input type="text" name="数据内容" autocomplete="off"><br>

        <!-- 密码框 -->
        密码框：<input type="password" name="密码" autocomplete="on"><br>

        <!-- 单选按钮 
            注意：单选框的name必须相通，不然不会实现单选
                  必须要指定value,value将会作为内容发给服务器
                  checked 将选项设置为默认选中
        -->
        单选按钮：<input type="radio" name="单选选项1" value="1" checked>
                 <input type="radio" name="单选选项2" value="2">
                 <input type="radio" name="单选选项3" value="3"><br>

        多选按钮：<input type="checkbox" name="多选选项1" value="1" checked>
                 <input type="checkbox" name="多选选项2" value="2">
                 <input type="checkbox" name="多选选项3" value="3"><br>

        <!-- 下拉列表 
              注意：selected 将选项设置为默认选中
        -->
        下拉列表：
        <select name="haha" id="">
            <option value="i">选项1</option>
            <option value="ii" selected>选项2</option>
            <option value="iii">选项3</option>
        </select><br>
        
        颜色选择框：<!-- IE不支持 -->
        <input type="color">

        <br><input type="submit" value="提交"><!-- 提交(submit)按钮（提交到服务器） ,默认字为“提交”，value 可以自定义按钮文字-->
        <br><input type="button" value="按钮"><!-- 不同按钮，通过js添加效果，就会有无限种可能 -->
        <br><input type="reset" value="重置"><!-- 重置按钮，将表单中的填写的内容重置 -->
        <!-- 和上面的是一样的效果 -->
        <br><br>
        <button type="submit" >提交</button>
        <button type="button" >按钮</button>
        <button type="reset" >重置</button>

    </form>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22表单——HTML

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--
复制链接

扫一扫

专栏目录