FCC—简单的问卷调查

项目要求：

需求 1： 此 app 中应存在一个 id="title" 的大小为 H1 的标题。

需求 2： 此 app 中应存在一段 id="description" 的大小为 P 的短小的描述。

需求 3： 此 app 中应存在一个 id="survey-form" 的 form 元素。

需求 4： 在表单元素内，应存在 id="name" 的输入框（必填项），以便用户输入姓名。

需求 5： 在表单元素内，应存在 id="email" 的输入框（必填项），以便用户输入邮箱。

需求 6： 如果用户输入了格式不正确的邮箱，则应出现来自 HTML5 表单数据校验的错误信息。

需求 7： 在表单内，用户应可以在 id="number" 的输入框中输入数字。

需求 8： 如果用户在数字输入框内输入非数字内容，则应出现来自 HTML5 表单数据校验的错误信息。

需求 9： 如果用户输入的数字超出了使用 min 和 max 属性定义的范围，则应出现来自 HTML5 表单数据校验的错误信息。

需求 10： 表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的标签。这些标签的 id 应分别为 id="name-label"、id="email-label" 和 id="number-label"。

需求 11： 表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符。

需求 12： 在表单元素内，应存在一个 id="dropdown" 的下拉列表，用户可以从中选取一个选项。

需求 13： 在表单元素内，应至少存在一组单选按钮，用户可以从中选取一个选项。 每组应使用 name 属性进行分组。

需求 14： 在表单元素内，应存在几个复选框，且每个复选框都应有 value 属性。

需求 15： 在表单元素的最后，应存在一个 textarea 元素，以便用户输入额外的批注。

需求 16： 在表单元素内，应存在一个 id="submit" 的按钮，以便用户提交表单。

实验内容：

    
        
        
        
    
    
        

        
爱宠调查
        
此调查旨在统计广大网民领养不同宠物的意向
        
        

            

                昵称：
                
                邮箱：
                
                数字：
                
            
            
是否有养过宠物呢？
            

                是

                否

            
            
最想要领养以下哪种宠物呢？
            

                
                    狗狗
                    猫猫
                    鹦鹉
                
            
            
为什么最想要领养该宠物呢？
            

                性格温和

                聪明可爱

                活泼粘人

            
            
其他补充：
            

                
            
                

        
    

几个用到的常用小结构：

带占位符的文本框:

其中若value不为空，则文本框初始状态中就是value的值，此时就看不见占位符“Please input your name”了。

单选按钮:

是

否


其中radio指明此时为复选框，name用于区分多种单选框，value为传回action的值。

复选框:

性格温和

聪明可爱

活泼粘人


其中checkbox指明此时为复选框，name用于区分多种复选框，value为传回action的值。

texarea元素具体介绍：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea
基本使用方法：

小结:

初学，编写的页面非常简单，仅完成题目所有需求，没有过多美化。
这个项目主要针对文本域、单选按钮、复选框、提交按钮及textarea元素进行了练习。