html+css表单

<style>
        body{
            margin: 0;
            text-align: center;
            font-size: 20px;
            background-image: url(images/0.jpeg);
            background-repeat: no-repeat;
            background-size:cover; 
            background-attachment: fixed;                     
        }
        p{
            color:gray;
        }
        #survey-form{
            margin:1% 20% 5% 20%;
            padding: 10px 0px 20px 15%;
            text-align: left;
            background-color: rgba(170, 199, 216,0.5);
        }
        label {
            
            display: flex; 
        }
        input[type=text],input[type=number],input[type=email]{
            border:1px solid #eeeeee;
            border-radius: 5px;
            width: 400px;
            height: 22px;
        }
        #dropdown{
            font-size: 16px;
            border-radius: 5px;
        }
        
        button{
            font-size: 20px;
            margin: 10px 60px;
            background-color: rgb(73, 131, 158);   
            width: 300px;        
        }
    </style>
<body>
    <h1 id="title">Form</h1>
    <p id="description">Test Form......</p>
    <form id="survey-form">
        <label id="name-lable" for="name">username:</label>
        <input  type="text" name="name"id="name" ><br><br>

        <label id="email-lable" for="eamil">email:</label>
        <input  type="email"name="email" id="email"><br><br>
       
        <label id="number-lable" for="number" >age:</label>
        <input  type="number" name="age" id="number" min="0" max="100"><br><br>
        which fruit do you like?<br>
        <select id="dropdown" name="fruit">
            <option value="apple">apple</option>
            <option value="banana">banana</option>
            <option value="grape">grape</option>
            <option value="watermelon">watermelon</option>
        </select><br><br>
        
        sex:<br><input type="radio" name="sex" value="male">male<br>
        <input type="radio" name="sex" value="female">female<br><br>

        which sports do you like?<br>
        <input type="checkbox" name="sports" value="football">football<br>
        <input type="checkbox" name="sports" value="swim">swim<br>
        <input type="checkbox" name="sports"value="basketball">basketball <br>
        <input type="checkbox" name="sports" value="volleyball">volleyball<br><br>
        additional information...... <br>
        <textarea name="message" rows="10" cols="60">          
        </textarea><br>
        <button type="submit" id="submit">submit</button>
            <br>
     </form>
</body>

截图

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值