【JQuery学习笔记day13】HTML 学习实践 - 完成信息收集表单

学习实践

结合之前学习的文本格式化、区块、布局、表单等知识点编写用户信息收集表。

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 元素的标题
<select> 定义了下拉选项列表
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<div> 定义文档区块,块级(block-level)
<span> 定义 span,用来组合文档中的行内元素。
<img> 定义 img,用来引用图像。
<b> 定义粗体文本
<em> 定义着重文字
<strong> 定义加重语气
<ins> 定义插入字

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息收集</title>
    <style type="text/css">
       p{text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/}
</style>
    <div style="width:800px;margin:0 auto;background-color:#f5f5f5">
        <div>
            <img style="width:800px;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=858456685,3477534936&fm=26&gp=0.jpg">
        </div>
        <div>
            <h1 align="center">措施</h1>
            <p>致力践行 <em>“对人责”</em>的理念,坚持 <strong>“内出”</strong>的。</p>
            <p><b>(一)加强管理。</b>市员工<ins>宿舍、食堂、厕所</ins>进行全方工。</p>
            <p><b>(二)加强管理。</b>内各工地坚作。</p>
            <p><b>(三)加强教育。</b>市。</p>
            <p><b>(四)加强应急处理。</b>市大传播。</p>
            <p><b>(五)做好监督检查。</b>染。</p>
        </div>
        <hr>
        <div id="header">
            <form>
                <fieldset>
                    <legend>居民身份信息收集:</legend>
                    姓名: <input type="text" size="30" name="username"><br>
                    年龄: <input type="text" size="30" name="age"><br>
                    联系电话: <input type="text" size="30" name="telephone"><br>
                    性别: <select name="sex">
                    <option value=""></option>
                    <option value=""></option>
                </select><br>
                    居住地:<textarea></textarea><br>
                    近一月是否有去过其他地区 :<br>
                    <input type="radio" name="behavior" value="True"><br>
                    <input type="radio" name="behavior" value="False"><br>
                    是否有一下症状表现(多项):<br>
                    <input type="checkbox" name="symptom" value="发热">发热<br>
                    <input type="checkbox" name="symptom" value="咳嗽">咳嗽<br>
                    <input type="checkbox" name="symptom" value="胸闷">胸闷<br>
                    <input type="checkbox" name="symptom" value="呼吸困难">呼吸困难<br>
                </fieldset>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>
</head>
<body>

</body>
</html>

显示效果
在这里插入图片描述

发布了86 篇原创文章 · 获赞 251 · 访问量 32万+

猜你喜欢

转载自blog.csdn.net/qq_23934063/article/details/104171135