html5&css&js代码 022 表单输入类型示例

html5&css&js代码 022 表单输入类型示例

这段HTML代码定义了一个网页,展示了表单输入类型示例。

一、代码

复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>编程笔记 html5&css&js 表单输入类型示例</title>
    <meta charset="utf-8"/>
    <style>
        body {
            font-size: 1.5em;
            color: cyan;
            background-color: teal;
        }

        .container {
            width: 900px; /* 设置容器的宽度 */
            margin: 50px auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }

        h1 {
            margin-top: 100px;
            text-align: center;
        }

        input {
            font-size: 1.3em;
        }
    </style>
</head>
<body>
<h1>表单输入类型示例</h1>
<div class="container">
    <form method="post" name="invest" enctype="application/x-www-form-urlencoded">
        <fieldset>
            <legend>个人资料</legend>
            <div>
                <label for="username">姓名:</label>
                <input type="text" id="username" name="username" size="20"/>
            </div>
            <div>
                <label for="URL">网址:</label>
                <input type="text" id="URL" name="URL" size="20" maxlength="50" value=""/>
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" size="20" maxlength="8"/>
            </div>
            <div>
                <label for="confirmPassword">确认密码:</label>
                <input type="password" id="confirmPassword" name="confirmPassword" size="20" maxlength="8"/>
            </div>
        </fieldset>

        <fieldset>
            <legend>兴趣爱好</legend>
            <div>
                <input type="checkbox" id="m1" name="music" value="rock"/>
                <label for="m1">摇滚乐</label>
            </div>
            <div>
                <input type="checkbox" id="m2" name="music" value="jazz"/>
                <label for="m2">爵士乐</label>
            </div>
            <div>
                <input type="checkbox" id="m3" name="music" value="pop"/>
                <label for="m3">流行乐</label>
            </div>
        </fieldset>

        <fieldset>
            <legend>所在城市</legend>
            <div>
                <input type="radio" id="city1" name="city" value="beijing"/>
                <label for="city1">哈尔滨市</label>
            </div>
            <div>
                <input type="radio" id="city2" name="city" value="shanghai"/>
                <label for="city2">长春市</label>
            </div>
            <div>
                <input type="radio" id="city3" name="city" value="nanjing"/>
                <label for="city3">沈阳市</label>
            </div>
        </fieldset>

        <input type="submit" name="submit" value="提交表单"/>
    </form>
</div>
<footer style="
            text-align: center;
            margin: 30px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #ffcc00;
        ">
    HTML+CSS+JavaScript编程配套代码 作者:明月看潮生
</footer>
</body>
</html>

二、解释

这段HTML代码定义了一个网页,展示了表单输入类型示例。网页使用了HTML5、CSS和JavaScript。具体功能如下:

页面样式:通过<style>标签定义了页面的字体大小、颜色、背景颜色等样式。

容器布局:使用.container类定义了一个宽度为900px的容器,并将其居中显示。

表单:通过<form>标签定义了一个表单,包含了个人资料、兴趣爱好和所在城市的信息输入。

个人资料:通过<input type="text"><input type="password">等标签定义了姓名、网址、密码和确认密码的输入框。

兴趣爱好:通过<input type="checkbox">标签定义了摇滚乐、爵士乐和流行乐的复选框。

所在城市:通过<input type="radio">标签定义了哈尔滨市、长春市和沈阳市的单选框。

提交按钮:通过<input type="submit">标签定义了一个提交表单的按钮。

页脚:通过<footer>标签定义了页面的底部,显示了作者的信息。

该网页主要展示了不同类型的表单输入元素的使用方法和样式设置。

相关推荐
拉不动的猪2 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴37 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中39 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
鹿九巫2 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长2 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
鱼樱前端2 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ2 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_5204 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
大溪地C4 小时前
HTML5 详细学习笔记
笔记·学习·html5
沉迷...4 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts