HTML 表单的用法

1、HTML表单的用途

简单说就是html通过表单收集用户信息(即:不同类型数据)并提交后台服务器,以便于用户和WEB服务器的交互。

2、HTML表单元素

HTML表单元素主要包括input、label、select、textarea等元素。

注:form的”action”属性用来指定处理该表单的后台程序URL,“method”属性用于指定传送数据的方式post还是get(默认)

2.1、input元素

   <input type="text">:定义用于文本输入的单行输入字段(默认宽度为20个字符)
   <input type="password">:定义密码字段
   <input type="radio">:定义单选按钮,允许用户在有限数量的选项中选择一个
   <input type="checkbox">:定义复选框
   <input type="submit">:定义用于向表单处理程序提交表单的按钮。
   <input type="button">:定义按钮
   <input type="number">:用于应该包含数字值的输入字段
   <input type="date">:用于应该包含日期的输入字段
   <input type="color">:用于应该包含颜色的输入字段,根据浏览器支持,颜色选择器会出现输入字段中。
   <input type="range">:用于应该包含一定范围内的值的输入字段,根据浏览器支持,输入字段能够显示为滑动控件
   <input type="month">:允许用户选择月份和年份,根据浏览器的支持,日期选择器会出现在输入字段中
   <input type="week">:允许用户选择周和年,根据浏览器支持,日期选择器会出现输入字段中。
   <input type="time">:允许用户选择时间(无时区),根据浏览器支持,时间选择器会出现输入字段中。
   <input type="datetime">:允许用户选择日期和时间(有时区),根据浏览器支持,日期选择器会出现输入字段中。
   <input type="datetime-local">:允许用户选择日期和时间(无时区),根据浏览器支持,日期选择器会出现输入字段中。
   <input type="email">:用于应该包含电子邮件地址的输入字段,根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
   <input type="search">:用于搜索字段(搜索字段的表现类似常规文本字段)。
   <input type="tel">:用于应该包含电话号码的输入字段,目前只有Safari 8支持该类型
   <input type="url">:用于应该包含URL地址的输入字段,根据浏览器的支持,在提交时能够自动验证url字段。
注:input标签的”placeholder”属性用于展示提示语,”accept”属性用来选择上传文件的属性。

2.2、label元素

label标签用于关联控件常与input标签一起使用 。label的”for”属性一般与input的”id”属性一致(绑定)

2.3、select元素

select标签和option标签用于展示下拉菜单,示例如下:

<select name="city">
                <option value="beijing">北京</option>
                <option value="shanghai" selected="selected">上海</option>
                <option value="hangzhou">杭州</option>
</select>

2.4、textarea元素

<textarea> 元素定义多行输入字段(文本域),示例如下:

<textarea name="article">
                多行文本,注意type=text和type=password的区别
</textarea>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 711评论 1 1
  • 在 HTML 中,表单是由 标记定界的区域,包含文本输入框、按钮、复选框和图形用户界面的其他功能部件。Web ...
    莱昂纳德刚阅读 486评论 0 0
  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 446评论 0 1
  • HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...
    FLYSASA阅读 445评论 0 0
  • 已经成年,但暗恋一个人,是什么样的感受? 是可以变成诗人,把所有由他引发的感受编写记录,触角变得敏感,情绪变的丰饶...
    紫苜阅读 856评论 1 5