学习任务

        根据任务要求，制作学员信息登记表。

 学习目标

      1.能够合理使用表单的各种控件

      2.能够使用CSS设置表单样式

      3.能够使用正则表达式验证表单的输入是否合理

观看视频

任务要求        

      制作如图所示的含有各种表单控件的学员信息登记表。

    要求如下：

         1.用户登录名：文本框，设置input的属性placeholder

         2.真实姓名：文本框，只允许输入汉字的正则表达式为pattern="^[u4e00-u9fa5]{0,}$"，设置required必填，自动获得输入焦点 autofocus属性

         3.真实年龄：number类型，最小值0，最大值120，设置required 属性

         4.出生日期：date类型,value="1990-10-1"

         5.电子邮箱：E-mail类型，设置placeholder="123456@126.com" 必填required 多项multiple

         6.身份证号：文本框，设置required 属性，pattern="^d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$"

          7.手机号码：tel类型，设置required 属性，pattern="^d{11}$" 

         8.个人主页：url类型，设置list="urllist"，设置datalist

           <datalist id="urllist">

              <option>https://www.itcast.cn</option>

              <option>https://www.boxuegu.com</option>

              <option>https://www.w3school.com.cn</option>

           </datalist>

           9.幸运颜色：color类型，设置初始颜色value="#fed000"

  拓展训练

1.页面背景是浅灰色

2.表单背景是白色

3.设置“登录”文字的颜色、大小

4.设置各文本框的宽度、高度、边框颜色等；输入内容后，提示词消失。

5.两处超链接，蓝色，无下划线，鼠标移上去变红色。

6.登录按钮绿底白色

7.Hbuilder绿色

8.设置页脚部分样式