表单元素使用

2024-03-30 22:50:07
开发
38

表单元素使用

- 要完成的效果:
- 代码实现:

要完成的效果:

在这里插入图片描述

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        img{
            height: 20px;
            width: 20px;
        }
        .right{
           text-align: right;

        }
       table tr td input,select,textarea{
            margin-left: 20px;
        }
       #submit{
        margin-left: 10%;
       padding: 3px 10px;

        background-color: yellow;
       }
       #reset,#cancel{
        background-color: rgba(43, 43, 104, 0.6);
        padding: 3px 5px;
       }
       
       .box{
      
        border: 2px solid greenyellow;
        padding-left: 10px;
        margin-left: 30%;
        margin-right: 20%;
       }
       span{
        font-size: 10px;
        text-align: right;
       }
       #login{
        font-size: 10px;
        text-align: right;
       }
    
        
    </style>
</head>
<body>


    
    <div class="box">
    <form action="">
    <table>
        <tr>
             <td class="right">用户名</td>    
             <td><input type="text" name="usename" size="15" maxlength="5" placeholder="请输入用户名"></td>
        </tr>
        <tr><td class="right">密码</td>
        <td><input type="password" name="password " placeholder="请输入密码"></td>
       </tr>
        <tr><td class="right"> email</td>
     
        <td><input type="text" name="emile"></td>
        </tr>
        <tr><td class="right">姓名</td>
            <td><input type="text" name="name"></td></tr>
        <tr><td class="right"> 手机号</td>
            <td><input type="text" name="tel"></td></tr>
        <tr> <td class="right">性别</td>
        
            <td>
                <input type="radio" name="sex" value="man" id="man">
                <label for="man"> <img src="men.png"> 男  </label>
            <input type="radio" name="sex" value="woman" id="woman" checked>
            <label for="woman"><img src="women.png" >女</td></label>
        </tr>
            <tr><td class="right">爱好 </td>
                <td><input type="checkbox" name="hobdy" value="0">吃
                         <input type="checkbox" name="hobdy" value="1">喝
                         <input type="checkbox" name="hobdy" value="2" checked>玩
                         <input type="checkbox" name="hobdy" value="3">乐
                </td>

            </tr>
            <tr>
                <td class="right">出生日期 </td>
                    <td><input type="text" name="" id=""></td>
            </tr>
            <tr><td class="right">所在学院</td>
                <td>
                <select>
                    <option value="0">--请选择--</option>
                <option value="1">机电工程学院</option>
                <option value="2">材料科学与工程学院</option>
               
                <option value="3" selected>计算机科学与工程学院</option>
                <option value="4">化学与工程学院</option>
                <option value="5">数学与统计学院</option>
                <option value="6">电气与电子工程学院</option>
                </select> </td></tr>
                <tr>
                    <td><p>自我介绍</p> </td> 
                       <td><textarea name="自我介绍" cols="60" rows="5">计算机科学与工程学院前身电子工程系是吉林工学院1978年复校后最早的五个系之一,1989年成立计算机及电子工程系,1999年更名为计算机科学与工程学院。1978年开设电子计算机及其应用本科专业,1998年更名为计算机科学与技术专业.在研究生层面具有计算机科学与技术、信息与通信工程两个一级学科硕士点和计算机技术,电子与通信工程两个专业学位硕士点；在本科生层面具有计算机科学与技术、电子信息、网络工程、软件工程四个本科专业.</textarea>
                    </td>
                </tr>
                <tr>
                    <td class="right">验证码</td>
                        <td><input type="text"> <img src="../code.png" alt=""></td>
                </tr>
            </table>
                        <input type="submit"  name="register" value="注册" id="submit"> 
                        <input type="reset" name="reset" value="重填" id="reset">
                        <input type="button" name="cancel" value="取消" id="cancel">
                 <div id="login">已有账号<a href="#">立即注册?</a></div>
                
                    </form>
               
            </div>
</body>
</html>

原文地址:https://blog.csdn.net/2302_77978695/article/details/137184124 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1774086706962763776.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

表单元素使用

表单元素使用

要完成的效果:

代码实现:

相关推荐

最近更新

热门阅读