表单form常用控件

默九思

于 2023-07-13 11:42:01 发布

阅读量245

点赞数 1

分类专栏： Html+Css 文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_43733614/article/details/131698879

版权

Html+Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文展示了HTML中用于创建表单的元素，包括文本输入框、密码输入、单选按钮、复选框、文本域、下拉选择以及不同类型的按钮，如提交、重置和普通按钮。还提到了fieldset和legend用于组织和标注表单内容。

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

其中的label标签，是用于捆绑内容

1、表单输入普通文本框和密码输入框

            <label>
                账号：<input type="text" name='user'>
            </label>

            <br>
            密码：<input type="password" name='pwd'>
            <br>

2、表单输入单选框默认选择

            <span>
                性别：
                <input type="radio" name='sex' id="male" value="男" checked>
                <label for="male">男</label>
                <input type="radio" name='sex' id="famle" value="女">
                <label for="famle">女</label>
            </span>

3、表单输入复选框

            <span>
                爱好：
                <label>
                    <input type="checkbox" name='hobby' id="read" value="看书">
                    看书
                </label>
                <label>
                    <input type="checkbox" name="hobby" id="sport" value="运动">
                    运动
                </label>
                <label>
                    <input type="checkbox" name="hobby" id="sign" value="唱歌">
                    唱歌
                </label>
            </span>
            <br>

4、文本域

            <label>
                其他：
                <textarea name="other" id="" cols="20" rows="3"></textarea>
            </label>
            <br>

5、下拉框默认项

            <label>
                籍贯：
                <select name="from" id="">
                    <option value="苏">江苏</option>
                    <option value="浙">浙江</option>
                    <option value="沪" selected>上海</option>
                </select>
            </label>

6、确认按钮两种写法

        <button>方法1 确认</button>

        <input type="submit" value="方法2 确认">

7、重置按钮

<button type="reset">重置</button>

8、普通按钮

<button type="button">检查是否可用</button>

9、fieldset和legend使用

        <fieldset>
            <legend>主要内容 </legend>
            <!-- 表单输入普通文本框和密码输入框 -->
            <label>
                账号：<input type="text" name='user'>
            </label>

            <br>
            密码：<input type="password" name='pwd'>
            <br>
            <!-- 表单输入单选框 默认选择-->
            <span>
                性别：
                <input type="radio" name='sex' id="male" value="男" checked>
                <label for="male">男</label>
                <input type="radio" name='sex' id="famle" value="女">
                <label for="famle">女</label>
            </span>
        </fieldset>