第三章表单

最新推荐文章于 2022-08-25 15:09:33 发布

JiangMye

最新推荐文章于 2022-08-25 15:09:33 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/JiangMye/article/details/80680811

版权

1，用HTML5实现申请表表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申请表</title>
</head>
<body>
<h1>申请表</h1>
姓名：<input type="text" size="30">
<p>教育程度：<input type="checkbox"value="硕士" checked/>硕士
    <input type="checkbox"name="a">博士</p>
常见邮箱：<input type="text">
<p>性别：
    <label for="a">男</label>
    <input type="radio"name="a"id="a">
    <label for="b">女</label>
    <input type="radio"name="a"id="b"></p>
年龄：<input type="text">
<p>月薪：<input type="text"size="8"></p>
<label for="c">附注：</label>
<textarea name="a"cols="30"rows="4" placeholder="请在这里键入附注"id="c"></textarea>
<p>
    国籍 
    <select name="0">
        <option value="">澳大利亚</option>
        <option value="1">美国</option>
        <option value="1">日本</option>
        <option value="1">新加坡</option>
    </select>
</p>
<input type="submit"value="提交">
<input type="reset"value="重置">
</body>
</html>

2，用HTML5实现电子产品调查表表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子产品调查表</title>
</head>
<body>
<h2>American Metric 电子产品调查表</h2>
姓名：<input type="text"size="30"placeholder="输入必须是2-6为字符"required/>
<p>购买日期：
    <input type="text"size="10">年
    <select name="a">
        <option value="">1</option>
    </select>月
    <select name="a">
        <option value="">1</option>
    </select>日
</p>
电子邮箱地址：<input type="text"placeholder="www.baidu.com"size="25">
<p>手机号码：<input type="text"placeholder="输入必须是以13/15/18/开头的11为数字"size="40"></p>
    您是否查看过我们的在线产品目录？
<input type="radio"name="a"value="是"checked/>是
<input type="radio"name="a">否
<p>
    如果查看过，您对哪些产品有兴趣购买？(选择提供的产品)
    <br/>
    <input type="checkbox">大屏幕电视机
    <input type="checkbox">音频设备
    <input type="checkbox">视频设备
    <input type="checkbox">相机
</p>
<label for="a">在填写订单之前，您还有什么问题，意见或建议？</label><br/>
<textarea name="a"cols="50"rows="5"placeholder="您的输入："id="a"></textarea>
<p>
    <input type="submit"value="提交">
    <input type="reset" value="重置"disabled/>
</p>
</body>
</html>

第三章 表单

第三章表单