html表单及css简单使用

最新推荐文章于 2023-12-29 12:55:39 发布

order libra

最新推荐文章于 2023-12-29 12:55:39 发布

阅读量34

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_58683895/article/details/133904776

版权

html表单及css简单使用

使用内容

使用表单相关标签以及css中部分样式
还有类选择器，id选择器，标签选择器

实现效果

实现代码

<html></html>
    
 <head>
    <title>表单目标</title>
    <meta charset="utf-8">
    <style>
        
        .allform{
            position: absolute;
            
            margin-top: 100px;
            margin-left: 550px;
            margin-right: 500px;
            margin-bottom: 200px;
            background-color: blanchedalmond;
            border: 1px;
            border-color: orange;
        }
        label{
            cursor: pointer;
		    display: inline-block;
			padding: 3px 6px;
			text-align: right;
			width: 150px;
			vertical-align: top;
        }
        #yhzc{
            color: red;
            background-color: orange;
      
        }
    </style>

 </head>
 <body>
    
    <div class="allform">
        <label><h1 id="yhzc">用户注册</h1></label>
    <form action="#" method="post" enctype="multipart/form-data" target="_blank" >
        <label for="">用户名：</label><input type="text" name="username" ><br>
        <label for="">密码：</label><input type="password" name="password1" ><br>
        <label for="">确认密码：</label><input type="password" name="password2" ><br>
        <label for="">性别：</label><input type="radio" name="sex"> 男<input type="radio" name="sex"> 女<br>
        <label for="">爱好：</label>
        <input type="checkbox" name="eat" value="ah1">吃饭
        <input type="checkbox" name="sleep" value="ah2"> 睡觉
        <input type="checkbox" name="fight" value="ah3">打豆豆
        <br>
        <label for="">生日：</label><input type="date" value="birth" name="birth">
        <br>
        <label for="">籍贯：</label>
        <select name="mon">
            <option value="">请选择省份</option>
            <option value="">河南</option>
            <option value="">北京</option>
            <option value="">山西</option>
            <option value="">四川</option>
            <option value="">成都</option>
            <option value="">山东</option>
            <option value="">山西</option>
            <option value="">上海</option>
            <option value="">天津</option>
            <option value="">云南</option>
            <option value="">psl's garden</option>
        </select>
        <br>
        <label for="">注册协议：</label>
        <textarea name="zcxy" id="" rows="5" cols="30">
欢迎注册，你同意了本协议：
1.xxxxxxxxxxxxxxxxxxxxxxx
2.xxxxxxxxxxxxxxxxxxxxxxx
3.xxxxxxxxxxxxxxxxxxxxxxx
4.xxxxxxxxxxxxxxxxxxxxxxx
5.xxxxxxxxxxxxxxxxxxxxxxx
        </textarea>
        <br>
        <input type="hidden" name="token" value="e10adc3949ba59abbe56e057f20f883e">
        <br>
        <label for="">头像上传：</label><input type="file" name="upload"><br>
        <label for="">操作：</label>
        <input type="button" name="putong" value="普通按钮"> 
        <input type="submit" name="shangchuan" value="上传按钮"> 
        <input type="reset" name="chongzhi" value="重置按钮">
        <br>
    
    </form>
    </div>
 </body>
 

</html>