HTML-表单控件语法汇总及其案例

阿珂要努力呀

已于 2023-10-19 16:45:54 修改

阅读量1.4k

点赞数 7

分类专栏： HTML+CSS 文章标签： html 前端

于 2022-10-15 17:07:19 首次发布

本文链接：https://blog.csdn.net/qq_43423011/article/details/127326750

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表单

本篇内容总结表单常用控件及属性，案例

一个完整的表单由表单域、表单控件、提示信息3个部分构成。

    <form action="URL地址" method="get/post" name="表单名称">    <!-- 表单开始 -->
        各种表单的控件...
    </form>    <!-- 表单结束 -->

action=“url地址” —>需要将表单提交到哪个页面
method=“get/post” —>表单数据提交方式

表单控件

（1）input 单标签 —>输入表单元素

属性：type =“值”，通过设置不同的 type 属性值，可以得到不同形式的输入字段类型。

<input type="属性值">

① type=“text” ----单行文本框类型，value属性可以设置默认提示内容，maxlength属性可以控制输入字符数

姓名：<input type="text" name="username" value="请输入用户名" maxlength="6">

在这里插入图片描述
② type=“radio” -----单选按钮单选项搭配name属性使用，所有单选项必须取同一name属性值，才能实现单选，搭配使用checked属性，实现默认选中。

性别: <input type="radio" name="sex" value="男">男 
      <input type="radio" name="sex" value="女" checked="checked">女
      <input type="radio" name="sex" value="人妖">人妖

在这里插入图片描述

性别: <input type="radio" name="sex" value="男" id="man"><label for="man">男</label>
      <input type="radio" name="sex" value="女" checked="checked" id="woman"><label for="woman">女</label>
      <input type="radio" name="sex" value="人妖" id="renyao"><label for="renyao">人妖</label>

tips：还可以搭配label标签（for 属性值= id 属性值），当点击 label 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。
③ type=“checkbox” ------多选框，同样可搭配checked实现默认选中。

兴趣：<input type="checkbox" checked>读书
      <input type="checkbox">跑步
      <input type="checkbox">画画

在这里插入图片描述
④ type=“password” ------密码输入框

密码：<input type="password">

在这里插入图片描述

⑤ type=“file” ------文件域

文件：<input type="file">

在这里插入图片描述
点击“选择文件”可浏览本地的文件上传。
⑥ type=“submit” ------提交按钮

提交按钮：<input type="submit">

在这里插入图片描述
提交按钮的另一种方式，使用button标签：

这也是个提交按钮：<button>提交</button>  <!-- 默认属性为submit -->

在这里插入图片描述
⑦ type=“reset” ------重置按钮

重置按钮：<input type="reset">

在这里插入图片描述
同样，我们可以使用button标签，创建一个重置按钮：

这也是个重置按钮：<button type="reset">重置</button>    <!-- type属性我们取值reset即可 -->

在这里插入图片描述
⑧：type=“date,month,week…” 日期和时间的输入类型

生日：<input type="date">

在这里插入图片描述

（2）textarea 多行文本域元素 ------创建多行文本框

留言：<textarea name="message" cols="30" rows="3">你好！</textarea>  <!-- name属性定义名称，cols属性定义多行文本框每行输入字符数，rows属性定义多行文本框显示的行数，超过该值，则会出现滚动条 -->

在这里插入图片描述

（3）select控件 ------下拉菜单

select标签用于创建一个下拉菜单，配合option标签使用，option 标签用于在下拉菜单中添加一个选项。
具体格式：

        下拉列表：
        <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            <option>选项4</option>
        </select>

在这里插入图片描述
若要实现分组后的下拉列表，可搭配 optgroup 标签使用：

        省份：
        <select>
            <optgroup label="广东">
                <option>广州</option>
                <option>深圳</option>
                <option selected>东莞</option>    <!-- selected属性，默认选中该项 -->
            </optgroup>
        </select>

在这里插入图片描述

（4）案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>

<body>
    <form action="">
        <table border="1">
            <tr>
                <td align="right">用户名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td align="right">确认密码：</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td align="right">验证码：</td>
                <td>
                    <input type="text">
                    <img src="images/hugh.webp" alt="" width="100">
                </td>
            </tr>
            <tr>
                <td align="right">性别：</td>
                <td>
                    <input type="radio" name="sex" id="man" checked><label for="man">男</label>
                    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
                </td>
            </tr>
            <tr>
                <td align="right">年龄：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right">爱好：</td>
                <td>
                    <select name="购物">
                        <option value="0">唱歌</option>
                        <option value="1">跳舞</option>
                        <option value="2">rap</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">你喜欢的游戏：</td>
                <td>
                    <input type="checkbox" id="computer"><label for="computer">穿越火线</label>
                    <input type="checkbox" id="nz"><label for="nz">逆战</label>
                    <input type="checkbox" id="lol"><label for="lol">lol</label>
                    <input type="checkbox" id="happy"><label for="happy">消消乐</label>
                </td>
            </tr>
            <tr>
                <td align="right">邮箱：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="right">邮箱密码：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td align="center">
                    <input type="submit">
                </td>
                <td><input type="reset"></td>
            </tr>
        </table>
    </form>

</body>

</html>

加油，分享课堂笔记~
不当之处请大家及时指出，若有什么建议可以给我留言！
❤笔芯

阿珂要努力呀

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
HTML-表单控件语法汇总及其案例

本篇内容总结表单常用控件及属性，案例action=“url地址” —>需要将表单提交到哪个页面method=“get/post” —>表单提交方式属性：type =“值”，通过设置不同的 type 属性值，可以得到不同形式的输入字段类型。① type=“text” ----单行文本框类型，value属性可以设置默认提示内容，maxlength属性可以控制输入字符数② type=“radio” -----单选按钮单选项搭配name属性使用，所有单选项必须取同一name属性值
复制链接

扫一扫