HTML表单元素、标签、iframe内联框架详细代码图解

最新推荐文章于 2024-08-18 21:47:24 发布

D_evin_

最新推荐文章于 2024-08-18 21:47:24 发布

阅读量1.1k

点赞数 6

文章标签： html html5 前端大前端

本文链接：https://blog.csdn.net/D_evin_/article/details/120028422

版权

本文详细介绍了HTML中的表单元素，包括<form>、<input>的各种类型，如文本框、密码框、单选框、复选框、按钮、文件上传等，以及<label>、<select>和<textarea>等辅助标签。还探讨了<iframe>的使用，包括属性设置和优缺点，并简要提及HTML5的结构化标签，如<section>、<nav>、<aside>、<header>和<footer>，强调了语义化的意义。

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

表单元素

1. 表单标签

- `<form></form>` 表单标签是 HTML 表单用于搜集不同类型的用户输入

- 双标签，一般情况下不能单独使用，需要在 form 元素中加入 input 等标签共同使用

- 常用属性

- name属性主要是对这个form进行标记

- methood=”get/post”， get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限。get安全性非常低，post安全性较高。但是执行效率get安全性非常低，post安全性较高。但是执行效率却比post方法好。

- action，处理表单提交的 URL（可以为node中的路由接口地址）。

- enctype属性，当method属性值为post时，enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded：未指定属性时的默认值。

<form action="提交地址" method="提交⽅式">n个需求的表单内容 ……</form>

2. input 标签及控件

- `<input/>`元素是最重要的表单元素。它有很多形态，根据不同的 type 属性。

- input 标签是单标签，主要依靠控件，input 的 type 类型就是用于书写控件的属性。它的控件有很多种类，从而达到我们要的需求。

- input 标签是内联元素，但属于特殊的内联元素，可以定义宽度高度，单不自占一行

<body>
    <form action="" method="GET">
        <table border="1" style="border-collapse:collapse;">
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style></style>
        </head>
        <body>
        </body>
        </html>
            <caption>注册详细信息表</caption>
            <tr>
                <td>用户名：</td>
                <td><input type="text"></td>
                <td>文本输入框</td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
                <td>密码输入框</td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="radio" 
                    name="sex" value="0" checked>男
                    <input type="radio" 
                    name="sex" value="1">女
                </td>
                <td>单选题，必要属性name，相同name才能呈现单选效果</td>
            </tr>
            <tr>
                <td>复选框：</td>
                <td><input type="checkbox"
                    name="lesson" value="0">HTML <br>
                    <input type="checkbox" 
                    name="lesson" value="1">CSS <br>
                    <input type="checkbox"
                    name="lesson" value="2">JavaScript
                </td>
                <td>name、value必要属性，获取value值才能知道用户选的什么</td>
            </tr>
            <tr>
                <td>上传审核文件：</td>
                <td><input type="file" multiple></td>
                <td>上传文件（一个，多个multiple）</td>
            </tr>
            <tr>
                <td>选择城市：</td>
                <td>
                    <select multiple>
                        <option value="0">请选择</option>
                        <option value="101">北京</option>
                        <option value="230">黑龙江</option>
                        <option value="150">内蒙古</option>
                        <option value="430">湖南</option>
                    </select>
                </td>
                <td>通过select标签查询value值，可以多选multiple</td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input type="number" min="18" max="75" step="5">
                </td>
                <td>step跨度</td>
            </tr>
            <tr>
                <td>出生日期：</td>
                <td><input type="date"></td>
                <td>选择的日期格式yyyy/mm/dd</td>
            </tr>
            <tr>
                <td>电子邮箱：</td>
                <td><input type="email"></td>
                <td>电子邮箱格式会在提交的时候验证，但不严格</td>
            </tr>
            <tr>
                <td>主题颜色：</td>
                <td><input type="color"></td>
                <td>颜色，通过value值获取颜色的色值</td>
            </tr>
            <tr>
                <td>薪资区间：</td>
                <td>60