html 表单格式&插入图片_html表格插入图片-CSDN博客

本文链接：https://blog.csdn.net/zhanghanqmx/article/details/123410052

这是一个HTML代码示例，展示了一个用户注册表单的设计。表单包含用户名、密码、确认密码、电子邮件、电话号码、头像上传、性别选择、兴趣爱好、家乡选择、入学分数、毕业日期等字段，以及相应的输入验证。此外，表单还包括了成绩评分条和出生日期选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 表单格式&插入图片

html 表单格式
- html 插入图片

html 表单格式


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>

    </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            max-width:800px;
            margin: 10px auto;
        }
        form{
            width:100%;
        }
        form fieldset{
            padding:20px 20px 10px;
        }
        form fieldset label{
            font-weight:bold;
            line-height:20px;
            width:100%;
        }
        form input,
        form meter{
            width:100%;
            margin:10px 0;
            display: block;
            height:30px;
            border: 1px solid #ccc;
            padding-left:5px;
        }
        form meter{
            width:100%;
            border: none;
            padding-left:0;
        }
        .btn{
            width:100%;
            height: 40px;
            margin-top: 20px;
        }
        .radioclass{width:20px!important;float:left;}
        .radiodiv{width:100%;height:45px;line-height:45px;}
        .fl{float:left;}
        .ml5{margin-left:5px;}
        .ml62{margin-left:-62px;}
    </style>

</head>
<body>
<form action="">
    <fieldset>
        <h1>Register Index</h1>
        <legend>Sign Up</legend>
        <label for="userName">Username:</label>
        <input type="text" name="userName" id="userName" placeholder="Please input your username" required>
        <label for="userName">Password:</label>
        <input type="password" name="password" id="password" placeholder="Please input your password" required>
        <label for="userName">Identification:</label>
        <input type="password" name="cpassword" id="cpassword" placeholder="PLease identify your password" required>
        <label for="email">Email：</label>
        <input type="email" name="email" id="email">
        <label for="phone">Phone Number：</label>
        <input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
        <label for="userImage">Profile：</label>
        <input type="file" Name="Select the file">
        <label for="sex">Sex/Gender：</label>
        <div class="radiodiv">
            <input type="radio" class="radioclass" name="sex" value="男"><span class="fl ml5">Male</span>
            <input type="radio" class="radioclass ml5" name="sex" value="女"><span class="fl ml5">Female</span>
        </div>
        <label for="like" class="ml62">Preference/Hobby：</label>
        <div class="radiodiv" style="border:1px red dashed;">
            <input type="checkbox" class="radioclass" name="like" value="唱歌"><span class="fl ml5">Singing</span>
            <input type="checkbox" class="radioclass ml5" name="like" value="跳舞"><span class="fl ml5">Dancing</span>
            <input type="checkbox" class="radioclass ml5" name="like" value="篮球"><span class="fl ml5">Basketball</span>
            <input type="checkbox" class="radioclass ml5" name="like" value="看书"><span class="fl ml5">Reading</span>
        </div>
        <label for="school" style="margin-left:-200px">
            Hometown：</label>
        <input type="text" list="school" name="college" id="college" placeholder="Please select">
        <datalist id="school">
            <option>HuiBei</option>
            <option>WuHan</option>
            <option>JingZhou</option>
        </datalist>
        <label for="score">Score of Entrance examination to University of China:</label>
        <input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
        <label for="level">Fundamental Level</label>
        <meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>
        <label for="inTime">BirthDay</label>
        <input type="date" name="inTime" id="inTime">
        <label for="leaveTime">Graduation Date</label>
        <input type="date" name="leaveTime" id="leaveTime">
        <input type="submit" name="submit" id="submit" class="btn">
    </fieldset>
</form>
<script>

    document.getElementById("score").oninput=function(){
    document.getElementById("level").value=this.value;
    }
</script>

</body>
</html>

html 插入图片

<div><img src="../photo/construction.jpg" /></div>

注意src格式，相对路径与绝对路径
背景图片另一种写法

<body background="../images/bg.jpg"></body>

以及url版本

<div style="width:宽度值; height:高度值; background:url(图片名称.jpg);"></div>