HTML5创建表单

您所在的位置:网站首页 表单的设计与制作 HTML5创建表单

HTML5创建表单

2023-12-19 19:51| 来源: 网络整理| 查看: 265

1 认识表单

  表单主要同于收集网页浏览者的相关信息,用。使用语法如下:

action:用于处理提交表单的格式,它可以是一个URL地址或一个电子邮箱地址。method:指明提交表单的HTTP方法。enctype:指明用来把表单提交给服务器得到互联网媒体形式。 认识表单 下面是输入用户信息 用户名称 用户密码 2 表单的基本元素的使用 2.1 单行文本输入框text的使用

  文本框用于访问者输入内容的表单对象,用来填写单个字或者简短的回答,如用户姓名和地址等。

属性值说明type=“text”定义单行文本框name定义文本框的名称,保证数据的准确采集,必须定义一个独一无二的名称size定义文本框的宽度,单位为单个字符宽度maxlenth定义最多输入的字符数value定义文本框的初始值 单行输入文本框 请输入您的姓名: 请输入您的地址: 2.2 多行文本框textarea的使用

  代码格式:

属性值说明name定义多行文本框的名称,保证数据的准确采集,必须定义一个独一无二的名称cols定义多行文本框的宽度,单位是单个字符宽度rows定义多行文本框的高度,单位是单个字符宽度wrap定义输入内容大于文本域时显示的方式 多行文本输入框 请输入您的评价: 2.3 密码域password的使用

  用于输入一些保密信息,输入时显示一些黑点或其它符号,增加输入文本的安全性。语法如下:

属性值说明type=“password”定义密码框name定义密码框的名称,保证唯一性size定义密码框的宽度,单位是单个字符的宽度maxlength定义最多输入的字符数 设置密码输入框 用户名: 登录密码: 2.4 单选按钮radio的使用

  单选按钮主要是在网页浏览者在一组选项中只能选择一个选项。其使用方法如下:

属性值说明type=“radio”定义单选按钮name定义单选按钮名称,单选按钮都是以组为单位,在同一组中的单选都必须用同一名称value定义单选按钮的值,在同一组中,他们的域值必须是不同的 设置单选按钮 选择感兴趣的书: Python C++ java html 2.5 复选框checkbox的使用

  复选框主要是让访问者在同一组选项中可以选择多个选项。每个复选框都是一个独立元素,都必须有一个唯一的名称。语法如下:

属性值说明type=“checkbox”定义复选框name定义复选框的名称,在同一组中复选框都必须用同一名称value定义复选框的值 设置复选框 选择感兴趣的方面: 游泳 健身 健身 健身 健身 2.6 下拉列框select的使用

  用于有限的空间设置多个选项。下拉列表框既可以单选,又可以用作复选。使用语法如下:

... ... 属性值说明name定义下拉列表框的名称size定义下拉列表框的行数multiple表示可以多选,如不设置,则只能单选value定义选择项的值selected表示默认已经选择本选项 设置下拉列表框 选择感兴趣的类型: 网站开发1 网站开发2 网站开发3 网站开发4 网站开发5

注:按住Ctrl键实现多选。

2.7 普通按钮button的使用

  控制其他定义了处理脚本的处理工作,代码如下:

属性值说明type=“button”定义普通按钮name定义普通按钮名称value定义按钮显示的文字onClick表示单击行为,也可以为其他事件,通过制定脚本函数来定义按钮行为 设置普通按钮 点击下面按钮,把文本框1的内容拷贝到文本框2的内容中: 文本框1: 文本框2: 2.8 提交按钮submit的使用

  将输入的信息提交到服务器,格式如下:

属性值说明type=“submit”定义提交按钮name定义提交按钮的名称value定义提交按钮显示的文字

  通过提交按钮可以将表单里的信息提交到表单里action所指向的文件。

输入用户信息 请输入你的姓名: 请输入你的住址: 请输入你的pho: 请输入你的单位: 2.9 重置按钮reset的使用

  重置按钮用来重置表单的输入信息,格式如下:

属性值说明type=“reset”定义重置按钮name定义重置按钮名称value定义重置按钮显示文字 重置 请输入用户名称: 请输入用户密码: 3 表单高级元素的使用 3.1 url属性的应用

  url属性用于说明网站网址的,显示为一个文本段输入URL地址,提交表单时,会自动验证url的值。其使用格式如下:

属性值说明type=“url”定义url输入框max(min)设置属性最大(小)值value规定默认值step设置合法的数字间隔 URL属性的应用 请输入网址: 3.2 email属性的应用

  与url类似,email属性用于让浏览者输入email地址,提交表单时会自动验证email域的值。

3.3 date属性和time属性的应用 属性含义date选取日、月、年month选取月、年week选取周年time选取时间datetime选取时间、日、月、年datetime-local选取(本地)时间、日、月、年 运用时间 选择商品购买的时间 3.4 number属性的应用

  提供数字输入类型,用户可以直接输入数字或者通过单击微调框中国的向上或者向下按钮选择数字。

应用nuber属性 此网站我曾来过 次了! 3.5 range属性的应用

  是一个滚动的控件,与number属性类似。

应用nuber属性 此网站我曾来过 次了!

注:默认情况置于中间,若指定最大最小值,则允许反向滚动轴。目前浏览器对这一属性还不能很好的支持。

3.6 required属性的应用

  规定必须在提交前填写区域不能为空,适用于text、serch、url、email、password、date、pickers、number、checkbox和radio等。

重置 请输入用户名称: 请输入用户密码: 4 综合案例 重置 用户反馈页面 姓  名: 性  别:男 女 年  龄: 电子邮件: 请输入您对该网站的建议:


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3