【Web应用技术基础】HTML(4)——表单类的标签

目录

题目1:文本框

题目2:密码框

题目3:单选框

题目4:多选框

题目5:单选框选中

题目6:禁用disabled

题目7:lable标签

题目8:下拉框

题目9:textarea

题目10:submit按钮

题目11:汇总题


题目1:文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="text" name="nickName"/>
</body>
</html>

题目2:密码框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <input type="password" name="check" value="123"/>
</body>
</html>

题目3:单选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    1. HTML是什么语言?(单选题)<br>
    <p><input type="radio" name="question"/>A:高级文本语言</p>
    <p><input type="radio" name="question"/>B:超文本标记语言</p>
    <p><input type="radio" name="question"/>C:扩展标记语言</p>
    <p><input type="radio" name="question"/>D:图形化标记语言</p>
</body>
</html>

题目4:多选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    休闲方式:<br>
    <!-- ********* Begin ********* -->
    <p><input type="checkbox" name="relax" />逛街 </p>
    <p><input type="checkbox" name="relax"/>看电影   </p>
    <p><input type="checkbox" name="relax"/>宅 </p>
        
    <!-- ********* End ********* -->
</body>
</html>

题目5:单选框选中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    婚姻状况:<br>
    <p><input type="radio" name="marry" checked="checked"/>未婚  </p>
    <p><input type="radio" name="marry"/>已婚</p>

</body>
</html>

题目6:禁用disabled

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    难度系数:<br>
    <p><input type="radio" name="degree">简单</p>
    <p><input type="radio" name="degree">中等</p>
    <p><input type="radio" name="degree" disabled="disabled">困难</p>   
   
</body>
</html>

题目7:lable标签

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

    <label for="user" >用户:</label>
    <input type="text" id="user" name="user"><br><br>
    <label for="pwd" >密码:</label>
    <input type="password" id="pwd" name="password"><br>
 
</body>
</html>

题目8:下拉框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    选择版块:

    <select>
    <option>问答</option>
    <option>分享</option>
    <option>招聘</option>
    <option selected="selected">客户端测试</option>
    </select>
        
   
</body>
</html>

题目9:textarea

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

    <style>
        textarea{
            width:200px;
            height:120px;
        }
    </style>
</head>
<body>

    用一句话描述自己的特点:<textarea maxlength="15"></textarea>
  
</body
</html>

题目10:submit按钮

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

    <label for="user">用户:</label><input type="text" id="user" name="user"/><br>
    <label for="pwd">密码:</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>
    <input type="submit" value="submit"/>

</body>
</html>

题目11:汇总题

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

    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;

        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
   
    textarea{
        width:200px;
        height:120px;
    }
    </style>
</head>
<body>

<form class="container">

	<div>
		<span>用户名:</span>
		<input type="text" class="common"/>
    </div>
	<div>
		<span>昵称:</span>
		<input type="text" class="common"/>
    </div>
    <div>
		<span>性别:</span>
        <label for="male"><input type="radio" id="male" name="sex"/>男</label>
		<label for="female"><input type="radio" id="female" name="sex"/>女</label>
		<label for="other"><input type="radio" id="other" name="sex" disabled="disabled" />保密</label>
	</div>
    <div>
		<span>教育程度:</span>
        <select class="common"/>
            <option class="common">高中</option>
            <option class="common">中专</option>
            <option class="common">大专</option>  
            <option class="common" selected="selected">本科</option>
            <option class="common">硕士</option>
            <option class="common">博士</option>
            <option class="common">其他</option>
        </select>
	</div>
    <div>
		<span>婚姻状况:</span>
		<label for="single"><input type="radio" id="single" name="state" checked="checked"/>未婚</label>
		<label for="married"><input type="radio" id="married" name="state"/>已婚</label>
		<label for="secret"><input type="radio" id="secret" name="state"  />保密</label>
	</div>
	<div>
		<span>兴趣爱好:</span>
		<label for="football"><input type="checkbox" id="football" name="hobby" />踢足球</label>
		<label for="basketball"><input type="checkbox" id="basketball" name="hobby"/>打篮球</label>
		<label for="film"><input type="checkbox" id="film" name="hobby" checked="checked" />看电影</label>
	</div>
	<div>
		<span>描述自己的特点:</span>
        <textarea class="common" maxlength="20"></textarea>
	</div>
	<div>
		<span></span>
		<input type="submit" class="common" value="提交"/>
    </div>

</form>
</body>
</html>

相关推荐

  1. HTML 标签

    2024-03-21 09:32:05       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-21 09:32:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-21 09:32:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-21 09:32:05       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-21 09:32:05       20 阅读

热门阅读

  1. 量化交易中怎么使用机器学习和大模型

    2024-03-21 09:32:05       23 阅读
  2. 掌握Android开发:技术技能与实践指南

    2024-03-21 09:32:05       18 阅读
  3. BOM

    BOM

    2024-03-21 09:32:05      26 阅读
  4. 工作需求ElementUi组件的使用

    2024-03-21 09:32:05       18 阅读