day6-表单标签

上一部分介绍关于表格标签及其属性宽度高度、对齐方式、内边距外边距（属性部分为了解内容，在以后的开发中样式均由CSS编写）、表格标签的其他属性caption、th等、表格的结构tbody（开发中不会主动使用，系统会自动添加）等、表格的合并
地址：http://www.jianshu.com/p/25d7dc4ca997

今天要介绍关于

如果有什么笔记中有什么错漏，或者提问技术问题都可以留言，大家进行经验分享 ---- 喵

表单标签的基本概念

• 1.什么是表单？
  • 收集用户信息 --- 例如：注册界面
• 2.什么是表单元素？
  • 什么是元素？
    • HTML中标签、标记、元素都是HTML的标签 --- 例如 a标签、a标记、a元素
  • 表单元素：指HTML中的一些标签，在浏览器中所有表单标签有其特殊的外观和默认的功能
• 3.格式

    <表单元素>

• 4.常见表单元素
  • input标签：里面有type属性，决定了input标签的功能和外观
    • 明文输入框text：账号
    • 安稳输入框password：密码
    • 给输入框设置默认值value
    • 单选框：是男或女radio
      • 注意：
        • 1️⃣单选框默认情况下不互斥，要想互斥，必须给每个单选框标签设置name属性并保持相同
        • 2️⃣设置默认值：checked属性
        • 注意点：当属性标签与赋值相同时可以省略赋值：例如 checked="checked" === checked；但在XHTML中必须写上取值，开发中不要省略取值！！
    • 多选框（复选框）：可以选择多个情况checkbox
      • 默认值：checked可以设置多个；单选框设置多个checked会显示最后设置的那个
• 5.练习代码

    账号:
    

    密码:
    

    账号:
    

    密码:
    

    性别:
    男
    女
    

    喜好:
    周传雄
    蓝色土耳其
    冬天的秘密

表单标签--按钮

• 1.定义普通按钮button：value设置按钮标题
  • 作用：配合JS完成一些操作
• 2.图片按钮img：自定义图片作为按钮
• 3.重置按钮reset：清空表单中已经填写好的数据
  • value：设置重置按钮的名字
• 4.提交按钮submit：填写好的数据提交远程服务器
  • action属性：提交服务器的地址--给form标签
  • 给需要提交的表单元素添加name属性
• 5.隐藏域hidden
  • 作用：配合提交按钮将一些数据偷摸提交到服务器---Ajax相关
• 6.练习代码

    账号:
    

    密码:
    
    
    
    

表单元素--label标签

• 题记：默认情况下，文字和输入框是没有关联关系的，若想点击文字时让文字和输入框进行绑定（文字和输入框聚焦），那么就可以使用label标签
• 1.绑定格式
  • 1️⃣将文字利用label标签包裹起来
  • 2️⃣给输入框添加一个id属性
  • 3️⃣在label中通过for属性和输入框中的id绑定起来

    账号:
    

    密码:
    
    账号:

• 推荐使用该格式：通过id可以自由选择绑定的标签，能应对需求变更

Datalist标签--了解（现在的浏览器已经不支持该标签了）

• 1.作用：给输入框绑定待选项 --- 例如：百度中输入关键字，下面会出现一堆待选项
• 2.格式：

• 3.步骤：
  • 1️⃣添加一个输入框input
  • 2️⃣添加一个datalist列表
  • 3️⃣在datalist中添加一个id
  • 4️⃣在输入框中添加一个list属性，将datalist的id赋值给list属性

请输入你的式神:

表单标签H5

• H5中关于input类型的更新

  
  
  

  表单标签H5

    
    邮箱:
    
    域名:
    
    电话号码:
    
    时间:
    
    
    

• 非input标签（掌握）
• select标签
  • 作用：控制下拉列表（选择省份等）
  • 格式：

• 类似于datalist，两者区别
  • ①select不需要绑定id
  • ②select不需要输入内容
  • ③select设置默认值属性selected
  • ④select可以通过optgroup标签给option进行分类

    北京
    上海
    杭州
    南宁
    
        青秀区
        兴宁区
        江南区
    
    
        西湖区
        拱墅区
    

• textarea标签
  • 作用：定义一个可以换行的文本输入框

• 注意点：
  • ①默认情况下，输入框可以无限换行
  • ②默认情况下，输入框有自己的宽度rows(行)和高度cols（列）
  • ③虽然指定了行列数，但是依旧可以无限往下输入
  • ④输入框右下角按钮，可以手动拉伸，取消手动拉伸：利用CSS

表单练习---注册界面