表单的简单训练

form用于定义用户输入的表单

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <form name="form1" method="get" action="index.html">
            <p>名字 <input type="text" name="fname" id="fname" value="" class="inout" /></p>
            <p>
                密码
                <input type="password" class="inout" id="pass" />
            </p>
            <p>
                <input type="submit" name="Botton" value="提交" />
                <input type="reset" name="Reset" value="重填" />
            </p>
        </form>
    </body>

</html>
View Code
复制代码

可以调节框的大小;

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>密码框</title>
    </head>
    <body>
        <form method="post" action="">
            <p>用户名
                <input name="name" type="text" size="21"/>
            </p>
            <p>
                密&nbsp;&nbsp;&nbsp;&nbsp;码
                <input name="pass" type="password" size="21" />
            </p>
        </form>
    </body>
</html>
View Code
复制代码

单选按钮 radio

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>单选按钮</title>
    </head>
    <body>
        <form method="post" action="">
            性别:
            <input name="gen" type="radio" class="input" value="男"/>男
            <input name="gen" type="radio" value="女" class="checked">女
        </form>
    </body>
</html>
View Code
复制代码

 可以实现多选按钮 checkbox

下拉列表框;

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>单选按钮</title>
    </head>

    <body>
        <form method="post" action="">
            性别:
            <input name="gen" type="radio" class="input" value="男" />男
            <input name="gen" type="radio" value="女" class="checked">女
            <input name="gen" type="radio" value="女" class="checked">不难不女
            <br/> 爱好：
            <input type="checkbox" name="interest" values="sport" checked />运动
            <input type="checkbox" name="interest" values="talk" class="checked" /> 聊天
            <input type="checkbox" name="interest" value="play" />玩游戏
            <br/>下拉列表框
            <input name="byear" value="yyyy" size="4" maxlength="4" /> 年
            <select name="bmon">
                <option value="0" selected="">选择月份</option>
                <option value="1">一月</option>
                <option value="2">一月</option>
                <option value="3">一月</option>
                <option value="4">一月</option>
            </select>月
            <input name="month" value="dd" size="2" maxlength="2" />日
        </form>
    </body>

</html>
View Code
复制代码

 按钮的实现：

复制代码
<!DOCTYPE html>
<!--按钮的实现-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>Button</title>
    </head>
    <body>
    <form method="get" action="detail.html" target="_blank">
        <p>用户名:<input name="name" type="text"></p>
        <p>密码：<input name="pass" type="password"></p>
        <p>
            <input type="reset" name="butReset" value="reset按钮"/>
            <input type="submit" name="butSubmit" value="submit按钮">
            <input type="button" name="butButton" value="button按钮">
            <input type="image" src="img/hetao.jpg"/>
            </p>
    </form>
    </body>
</html>
View Code
复制代码

文本域 文件域

 

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文件域</title>
    </head>

    <body>
        <form method="post" action="" enctype="multipart/form-data" target="_blank">
            <h4>填写个人评价</h4>
            <p>
                <textarea name="notebook" cols="40" rows="6">
            </textarea>>
            </p>
            <p>
                <input type="file" /><br/>
                <input type="submit" name="upload" value="上传" />
            </p>
        </form>
    </body>

</html>
View Code
复制代码

 

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <form action="#" method="post" target="_blank">
            <p>
                邮箱
                <input type="email" name="email" /><br/> 网址
                <input type="url" name="useurl" /><br/> 递增
                <input type="number" name="number" min="0" max=100 step="10" /><br/> 滑块(输入数字)
                <input type="range" name="range1" min="0" max="10" step="2" />
            </p>
            <p>
                请输入搜素关键词：
                <input type="search" name="sousuo" />
                <input type="submit" value="Go" />
            </p>
            <input type="submit" />
            <input type="submit" /><br/>
        </form>
    </body>

</html>
View Code
复制代码

 hidden用法

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>隐藏域</title>
    </head>
    <body>
        <form action="" method="get">
            <p> 用户名:<input name="name" type="text"></p>
            <p>密码：<input name="pass" type="password"</p>
            <p><input type="submit" value="提交"</p>
            <p><input type="hidden" value="666"name="serid"</p>
    </body>
    </form>
</html>
View Code
复制代码

 只读与禁用

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>只读与禁用</title>
    </head>

    <body>
        <form action="" method="get">
            <p> 用户名:<input name="name" type="text" value="张三" readonly="readonly" /></p>
            <p>密码:<input name="pass" type="password" r/> </p>
            <p><input type="submit" value="修改" disabled="disabled" /r</p>
        </form>
    </body>

</html>
View Code
复制代码

 标签：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            请选择性别
            <label for="male">男</label>
            <input type="radio" name="gender" id="male" />
            <label for="female">女</label>
            <input type="radio" name="gender" id="female" />
        </form>
    </body>
</html>
View Code
复制代码

 placeholder:

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <p>
                输入搜索的关键词：
                <input type="search" name="souosuo" placeholder="请输入需要的关键字" />
                <input type="submit" value="Go" />
            </p>
        </form>
    </body>
</html>
View Code
复制代码

 

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <form action="#" method="post">
            <p>
                用户名*:
                <input type="text" name="username" required="" />必填
                <input type="submit" value="提交" />
            </p>

        </form>
    </body>

</html>
View Code
复制代码

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="post"> 
        <p>
            电话号码：
            <input type="text" name="tel" required pattern="^1[358]\d{9}" /> *以13、15、18开头的11位数字<br/>
            <input type="submit" value="提交" />
        </p>
        </form>
    </body>
</html>
View Code
复制代码

 

posted @   Hello_World2020  阅读(205)  评论(0)  编辑  收藏  举报
编辑推荐：
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行：
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Browser-use 详细介绍&使用文档
· 软件产品开发中常见的10个问题及处理方法
· Vite CVE-2025-30208 安全漏洞
点击右上角即可分享
微信分享提示
AI原生IDE