HTML5 from表单实例

最新推荐文章于 2024-07-31 18:14:15 发布

sun_smile1

最新推荐文章于 2024-07-31 18:14:15 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/sun_smile1/article/details/68942009

版权

这篇博客介绍了HTML5中的表单元素，包括文本输入、密码输入、单选按钮、复选框、文件上传、图像按钮、普通按钮、下拉菜单、文本域以及提交和重置按钮的使用。通过实例展示了各元素的语法和功能。

摘要由CSDN通过智能技术生成

<form action="跳转路径" method="get" id="qun">
<!--<form action="../03/table.html" method="post">-->
    <fieldset><!--边框线-->
        <legend>用户注册</legend><!--边框标题-->

        <table>
            <tr>
                <td>会员名：</td>
                <td><input type="text" name="name"></td>
                <td>（可包含a-z,0-9和下划线）</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="text" name="pwd"></td>
                <td><input type="password" name="pwd"></td>
                <td>（至少包含六个字符）</td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <!--name属性里属性值相同，互斥-->
                    <input type="radio" name="sex" value="boy">男
                    <input type="radio" name="sex" value="girl">女
                    <input type="radio" name="sex" value="secret">保密
                </td>

            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <input type="checkbox" name="hobby" value="basketball">篮球
                    <input type="checkbox" name="hobby" value="football">足球
                    <input type="checkbox" name="hobby" value="pingpang">乒乓球
                </td>

            </tr>
            <tr>
                <td>文件：</td>
                <td>
                    <input type="file" name="file">
                </td>

            </tr>
            <tr>
                <td>图片按钮：</td>
                <td>
                    <input type="image" src="../../img/hhh.jpg">
                </td>

            </tr>
            <tr>
                <td>普通按钮：</td>
                <td>
                    <input type="button" value="普通按钮">
                </td>

            </tr>
            <tr>
                <td>普通按钮：</td>
                <td>
                    <button>普通按钮</button>
                </td>

            </tr>
            <!--【各类表单元素】
            select  下拉选项  multipie多选
                             size 一次性显示选项个数
            -->
            <tr>
                <td>爱好：</td>
                <td colspan="2">
                    <select name="hobby1" id="hobby1" multiple size="2">
                        <option value="1">篮球</option>
                        <option value="2">足球</option>
                        <option value="3">乒乓球</option>
                    </select>
                </td>
            </tr>
            <!--textarea：文本域 -->
            <tr>
                <td>协议</td>
                <td colspan="2">
                <textarea name="" id="" cols="10" rows="5">欢迎阅读本协议...
                    
                </textarea>
                </td>
            </tr>
            <tr>
                <td><input type="submit"/></td>
                <td><input type="reset"/></td>
                <td><input type="reset" value="自由名"/></td>
            </tr>
        </table>
    </fieldset>
</form>
<!--form属性  form指明id,表单外input中，连接form="qun",可以提交数据-->
<input type="text" name="nick" form="qun"/>