一个简单的相亲html代码

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class03</title>
		<style>	
		
		</style>
	</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br><br>
        性别：
        <label><input type="radio" name="sex" checked> 男</label>
        <label><input type="radio" name="sex"> 女</label>
        <br><br>

        所在城市：
        <select>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option>南京</option>
        </select>
        <br><br>

        婚姻状况：
        <label><input type="radio" name="condition" checked> 未婚</label>
        <label><input type="radio" name="condition"> 已婚</label>
        <label><input type="radio" name="condition"> 保密</label>
        <br><br>

        喜欢的类型：
        <label><input type="checkbox" checked> 可爱</label>
        <label><input type="checkbox" checked> 性感</label>
        <label><input type="checkbox"> 御姐</label>
        <label><input type="checkbox"> 萝莉</label>
        <label><input type="checkbox"> 小鲜肉</label>
        <label><input type="checkbox"> 大叔</label>
        <br><br>

        个人介绍：<br>
        <textarea name="" id="" cols="60" rows="10"></textarea>

        <h3>我承诺</h3>
        <ul>
            <li>年满18岁，单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
     
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>

</body>
</html>

更多推荐

青春不常在,抓紧谈恋爱——html代码