Html5 表单的学习

学习来源

文本区域

  • 如果用户输入大段字符串,则应该使用<textarea>标签,因为<input type="text"/>只能接受单行文本。
  • 其中<textarea>标签有3个属性,cols设置文本区域内可见字符宽度。
    rows设置文本区域内可见行数。
    wrap定义输入内容大于文本区域宽度时显示的方式。soft默认值,提交表单时,被提交的值不包含不含行。hard提交表单时,被提交的值包含不换行,使用hard时,必须设置cols属性。

单选按钮和复选框

  • 使用<input type="radio>"可用定义单选按钮,多个name属性值相同的单选按钮可用合并为一组,称为单选按钮组,在单选按钮组,只能选择一个选项,不能多选或空选。
  • 设计单选按钮组时,应该设置单选按钮组的默认值

选择框

  • 使用<select>标签可用设计选择框,在标签中应该含一个或多个<option>标签
  • 使用<optgroup>标签可用对选择项目进行分组,一个标签包含多个<option>标签,使用label属性设置分类标题。
  • 选择框可用显示下拉菜单和列表框两种形式。
  • 下拉菜单:在选择框中只能选一个项目
  • 列表框:设置多选。

文件域和隐藏域

  • 使用<input type="file">可以设计文件域,用来提交本地文件,使用multiple属性可以上传多个文件。
  • 使用<input type="hidden">可以设计隐藏域,用来向服务域提交一些简单、固定的值,该值不会显示在页面上,常常用于提交客户端的标识值。

数据列表

  • 使用datalist元素为输入框提供一个可选的列表,供用户输入匹配或者直接选。
  • datalist元素需要与option元素配合使用,每一个option选项都必须设置value属性值。
  • <datalist>标签用于定义列表框,<option>标签用于定义列表项。
  • 如果需要把datalist提供的列表绑定到某个输入框上,需要使用输入框的list属性来引用datalist元素的id

输出结果

  • output元素用于在浏览器中显示计算结果或脚本输出
  • <output name="">Text</output>

设置属性

名称和值

  • 每个表单空间都应该设置一个名称。
  • 该属性有两个作用,一是服务器可以根据name获取对应控件提交的值,二是在Javascript脚本中可以直接使用点语法访问对应控件对象。
  • 如果需要设置CSS样式,或者需要通过DOM访问表单对象,或者需要与<label>标签绑定,还应该为表单控件设置id属性。
  • 如果表单控件需要向服务器传递值,必须设置value属性值。

必填

  • required属性用于定义输入框填写的内容不能为空。

禁止验证

  • novalidate属性规定在提交表单时不应该验证forminput域。适用<form>标签。

多选

  • multiple属性可以设置输入域一次选择多个值。适用于emailfile类型的<input>标签。

匹配模式

  • pattern属性规定用于验证input域的模式

HTML5表单的学习代码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值