Coke_Uncle
Coke_Uncle

HLTM5简介标签表单元素

                                                HLTM5


html5：超文本标签语言（标签）


    
:强制换行      

:水平线    开始：粗体

    

:一级标题  最高只能6级    

开始

结束：标签一个段落         开始结束：斜体     

    运算符：
         空格     >>大于    <<小于   $quot;引号    &coyp;版权符号?


   注释和特殊符号： 
    
         字符空格


    超链接
百度

列表

    无序:无序列表由

    标签和
  • 标签组成
        有序:有序列表由
      标签和
    1. 标签组成

          

        （
          ）标签作为无序（有序）列表的 声明            
        1. 标签作为每个列表的起始 

           
                          有序   无序 都是这样使用的
              
                  

            (
              )标签里面只能嵌套
            1. 标签不能嵌套其他标签。

                      

            2. 标签里面可以嵌套任意标签


                  定义列表:定义列表由

              标签代表开始
              标签代表每个列表的起始
              标签代表定义

                  表格
                      


                          
                              
                          
                      

                      跨列colspan=""
                      跨行rowspan=""

                   视频元素
                      

                      video 视频元素

                      controls属性是用于播放视频的暂停、播放、音量的控件

                      使用格式：
                      

                      source用来连接格式

                      另一种格式
                      

                  慎用autoplay元素：设置autoplay属性后，不需要与用户进行任何交互，视频文件加载完成后就自动播、

                  放。所以大部分用户对这个功能很反感，应该慎用


                  音频元素
                      
                          
                      audio音频元素

                      controls属性是用于播放音频的暂停、播放、音量的控件
                      使用格式：
                      

                      


              表单语法
                  
                  


                 

               名字：  


                 

               密码：  


                 


                   
                   
                 

               名字：  


                 

               密码：  


                 


                   
                   
                  --------------------------------------------------
                  

                  type：指定的元素类型。text、password、checkbox、radio、submit、reset、file、hiage和button，默认为            text

                  name：指定表单元素的名称

                  value：元素的初始值type为radio时必须指定一个值
                  
                  size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，            宽度以像素为单位

                  maxlength：type为text或password时，输入的最大字符数

                  checkbox：type为radio或checkbox是，指定按钮是否是被选中


                  input的属性，说明type取不同值时，表示不同的表单元素，并且讲解表格中每个值表示的表单元素


              文本框
                  
                  -------------------------------------------------------------------------------
                  

                  1.当type取值为text时为文本框，name属性是必须的，其他几个属性并不是必须的，其他几个属性将根据表单需            要而设置
                  2.value的初始值，size与maxlength的区别，当没有设置maxlength时向文本框中输入内容没有限制，当设置            maxlength时再向文本框中输入值将会有字符数的限制

              密码框
                  
                  ----------------------------------------------------
                  

                  1.当type取值为password时为密码框，name属性是必须的，其他属性并不是必须的，实际开发中通常不设置value        初始值。
                  2.向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。


              单选按钮

                  男
                  女
                  ------------------------------------------------------------
                  男
                  女

                  1.当type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的。
                  2.同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
                  3.希望在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的            checked属性

              复选框
                  运动
                  聊天
                  玩游戏
                  -----------------------------------------------------------------
                  运动
                  聊天
                  玩游戏

                  1.当type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。
                  2.同一组复选框，根据需要可设置name属性值相同，也可不同
                  3.希望在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有多个复选框有默认的        checked属性。

              列表框
                  
                  -----------------------------------------------------------
                  <列表框 name="列表名称" size="行数">
                  <选项 value="选项的值" selected="selected默认选中项">对应的值
                  <选项 value="选项的值">…
                  

                  1.列表框的语法,重点说明它的标签组成，一个
                  
                  
                  -----------------------------------------------------------
                  
                  
                  

                  1.type取值不同表示不同的功能，讲解各种按钮的功能。
                  2.name和value属性是必须的，其他属性并不是必须的
                  3.有时会使用图片代替按钮，讲解图片按钮的用法，强调type和src属性，强调“type”属性没有设置为“submit        ”，但仍然具备提交表单的功能。
                  4.单击三个按钮，让学员看三个按钮提交后显示的不同效果，主要演示提交按钮和重置按钮，提一下普通按钮是需        要添加onclick事件的，后期课程会讲解，这里稍微提一下就可以了。


              多行文本框
                  
                  ---------------------------------------------------------------------------
                  
                  
                  1.强调多行文本域的内容是在之间

              文件域
                  form action="" method="post" enctype="multipart/form-data">
                    


                    


                  

                  -----------------------------------------------------------------
                  form action="" method="post" enctype="multipart/form-data表单码属性">
                    


                    


                  
                  
                  1.强调在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单        数据分为多部分提交。简单说明即或，并且告诉学员这部分的内容，在后续课程中会有详细的讲解。
                  2.说明type值为file即为文件域。

              邮箱
                  

              邮箱:


                  
                  ---------------------------------------------------
                  

              邮箱:


                  
                  注意：会自动验证Email地址格式是否正确
                  
                  1.type值为email即为邮箱。

              网址

                  

              请输入你的网址:


                  
                  ----------------------------------------------------------
                  

              请输入你的网址:


                  
                  注意：会自动验证URL地址格式是否正确

                  1.说明type值为url即为网址

              数字
                  

              请输入数字:      step="10"/>


                  
                  -------------------------------------------------------------------
                  

              请输入数字:      step=合法的数字间隔"10"/>


                  
                  
                  1.说明type值为number即为数字。

              滑块
                  

              请输入数字:      step="2"/>


                  
                  ------------------------------------------------------------------
                  

              请输入数字:      step=合法的数字间隔"2"/>


                  
                  
                  1.说明type值为range即为滑块。

              搜索框
                  

              请输入搜索的关键词:


                  
                  ------------------------------------------------------------------
                  

              请输入搜索的关键词:


                  
                  
                  1.说明type值为search即为搜索框。

              表单的初级验证:
                  表单验证的好处:
                      减轻服务器的压力
                      保证数据的可行性和安全性


              placeholder
                      input类型的文本框提供一种提示（hint）
                      可以描述文本框期待用户输入何种内容
                      提示语默认显示，当文本框中输入内容时提示语消失
                      适合于input标签：text、search、url、email和password等类型

                      
                                         ---------------文本框输入内容提醒

              required    
                      规定文本框填写内容不能为空，否则不允许用户提交表单
                      适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

                  
                                    -----------  必填项


              pattern    
                      用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

                  
                                       ------------------------验证规则，正则表达式    

                  


              常用的表单元素：
                      文本框（text）
                      密码框（password）
                      单选按钮（radio）
                      复选框（checkbox）
                      列表框（