首页 ✒舞文弄墨,随笔收获⏳

这里有我精心整理的一份表单示例,请按需收藏,随时回来看一看:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>form 表单示例</title>
        <style>
            .mytitle {text-align: center;}
            .myform {border: 1px solid #008000; padding: 20px 10px; width: 500px; margin: 20px auto;}
        </style>
    </head>
    <body>
        <h1 class="mytitle">form 表单示例</h1>
        <!-- 表单可以指定提交后的 method,表单提交如果有密码的话尽量用 post 方式,安全些 -->
        <form action="" method="post" class="myform">
        
            <!-- 文本编辑框 -->
            <!-- label 的 for 属性可以跟另一个 input 标签的 id 绑定,捆绑成组,点标签文字会一起聚焦 -->
            <label for="user">账号:</label>
            <!-- maxlength 可以设置允许输入的最大值 -->
            <!-- name 属性为提交表单时候的参数名 -->
            <input type="text" id="user" name="user" maxlength="7" placeholder="请输入账号">
            <br>
        
            <!-- 密码输入框,type 需要为 password -->
            <label for="user">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码">
            <br>
        
            <!-- 单选框 -->
            <!-- 通过相同的 name 属性可以打包成组 -->
            性别:
            <!-- checked 属性可以提前默认选中 -->
            <input type="radio" id="man" name="gender" value="man" checked>
            <label for="man">男</label>
            <input type="radio" id="woman" name="gender" value="woman">
            <label for="woman">女</label>
            <br>
        
            <!-- 多选框 -->
            兴趣爱好:
            <input type="checkbox" id="running" name="running" value="on" checked>
            <label for="running">跑步</label>
            <input type="checkbox" id="basketball" name="basketball" value="on">
            <label for="basketball">篮球</label>
            <input type="checkbox" id="dancing" name="dancing" value="on">
            <label for="dancing">跳舞</label>
            <input type="checkbox" id="football" name="football" value="on">
            <label for="football">足球</label>
            <br>
        
            <!-- 下拉列表框 -->
            出生年:
            <!-- 通常是常规的下拉框,一行的,可以通过 size 属性设置多行显示,如本例 -->
            <select name="bornyear" id="bornyear" size="2">
                <!-- Emmet 写法: option[value=$@1990]{$@1990}*30 -->
                <option value="1990">1990</option>
                <option value="1991">1991</option>
                <!-- value 为提交时表单的值,里面包着的内容为显示的值 -->
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <!-- selected 表示默认的选择项 -->
                <option value="2000" selected>2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
            </select>
            <br>
        
            <!-- 可以设定一个按钮,如果没有绑定事件,则按下没啥反应 -->
            <input type="button" value="我是一个按钮"><br>
        
            <!-- 可以设定多行文本区域,设定初始的行列数和默认的文本 -->
            <textarea cols="50" rows="10" name="multicontents">您好!我是多行文本输入域,可以设定初始宽高</textarea><br>
        
            隐藏域(你是看不到我的,适合放一些验证随机值等,提交表单时会一起提交):
            <!-- 隐藏域前台看不到,但值存在,值可以考虑动态加载,不同的人不同,用于做表单验证,避免机器人等 -->
            <input type="hidden" name="hidden" value="d27d7b1542d91641d1d232c9f58b96d1" /><br>
        
            <!-- 提交表单的 type 一定是 submit,重置为 reset,会把表单所有内容重置为初始状态 -->
            <input type="submit" value="提交表单">
            <input type="reset" value="重置表单">
        
        </form>
    </body>
</html>

最终呈现效果:

337.png

扫描二维码,在手机上阅读!


文章评论