表单元素01

简介: 文档:表单元素一、表单元素汇总form:表示HTML表单input:表示用来收集用户输入数据的控件textarea:表示可以输入多行文本的控件select:表示用来提供一组固定的选项option:表示提供一个选项optgroup:表...

文档:


表单元素

一、表单元素汇总
form:表示HTML表单
input:表示用来收集用户输入数据的控件
textarea:表示可以输入多行文本的控件
select:表示用来提供一组固定的选项
option:表示提供一个选项
optgroup:表示一组相关的option元素
buttton:表示可用来提交或者重置的表单按钮(或一般按钮)
datalist:定义一组提供给用户的建议值
fieldset:表示一组表单元素
legend:表示fieldset元素的说明性标签
label:表示表单元素的说明标签
output:表示计算结果

二、表单元素解析
1、定义表单
      <form>
  用户名:<input name="user">
  <button>提交</button>
 </form>
<form>元素主要是定义本身是一组表单。
属性:
action:表示表单提交的页面,默认提交给当前页面
method:表示表单的请求方式,post和get两种,默认get
enctype:浏览器发送给服务器的数据所采用的编码格式。不建议使用
name:设置表单的名称,以便程序调用
target:设置提交时的目标位置
autocomplete:设置浏览器记住用户输入的数据,实现自动完成表单。默认为on自动完成,如果不想自动完成则设置成off.
novalidate:设置是否执行客户端数据有效性检查。

2、input:用户输入数据
属性
autofocus:让光标聚焦在某个input元素上,让用户直接输入。
disabled:禁用input元素,禁用后改input不能输入文本了。
autocomplete:单独设置input元素的自动完成功能。
form:让表单外的元素和指定的表单挂钩提交。
type:input元素的类型,内容较多,将在下节课讲解。
name:定义input元素的名称,以便接收到相应的值。

      <form method="get" id="login">
  用户名:<input name="user">
  <button>提交</button><br>
  
 </form>
 <br>
  电子邮件:<input name="email" form="login">

3、label标签:添加说明标签
     <form method="get" id="login">
  <label>
  用户名:<input name="user">
  <button>提交</button><br><br>
 </label>
 <label>
  电子邮件:<input name="email" form="login">
 </label>
 </form>


能够实现当点击 “用户名”的时候,光标也会显示在用户名后面的输入框中。让用户体验更好。

4、fieldset:对表单进行编组
fieldset元素可以将一些表单元素组织在一起,形成一个整体。
属性:
name:给分组定义一个名字。
form:让表单外的分组与表单挂钩
disable:禁用分组内的表单

5、legend添加分组说明标签

               <fieldset name="pwd">
   <legend>密码表单</legend>
   密码:<input name="pass"><br><br>
   确认密码:<input name="repass">
  </fieldset>


6、button按钮
type属性:
submit:提交表单,默认
reset:重置表单,不是清空,而是回到初始化的状态,相当于刷新。
button:一般性按钮

  <button type="submit">提交</button> 
  <button type="reset">重置</button> 
  <button type="button">按钮</button>


源码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>表单元素</title>
    
</head>
<body>
    <br><br>
    表单元素
    <hr><br>
    <form method="get" id="login">
        <fieldset name="username">
            <legend>用户名表单</legend>
          <label>
              用户名:<input name="user">
          </label>
          <label>
              电子邮件:<input name="email" form="login">
          </label>
        </fieldset><br><br>
        <fieldset name="pwd">
            <legend>密码表单</legend>
            密码:<input name="pass"><br><br>
            确认密码:<input name="repass">
        </fieldset><br>
        <button type="submit">提交</button> 
        <button type="reset">重置</button> 
        <button type="button">按钮</button><br><br>
    </form>
    <br>
        <!-- 电子邮件:<input name="email" form="login"> -->
</body>
</html>
目录
相关文章
|
6月前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
6月前
|
前端开发 JavaScript
几种常见的获取页面元素数据的方法
几种常见的获取页面元素数据的方法
52 0
|
4月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
159 0
|
5月前
|
JavaScript 前端开发
原生JS如何查询元素属性
原生JS如何查询元素属性
39 0
|
前端开发
如何优雅地为列表非首项元素添加样式,关键靠他们。
在开发中我们常常会会遇到列表相关的场景,比如说:卡片列表,导航栏等等。
103 4
如何优雅地为列表非首项元素添加样式,关键靠他们。
|
前端开发
03 # 网页元素的属性
03 # 网页元素的属性
73 0
|
容器
2、表格和表单元素
2、表格和表单元素
98 0
2、表格和表单元素
|
前端开发 算法 JavaScript
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
阅读使人充实,会谈使人敏捷,写作使人精确。 ——培根
144 0
【JavaScript-事件②】表单元素的属性操作,密码显示隐藏的实现
|
前端开发 JavaScript
|
前端开发 JavaScript
表单验证+获取元素的三种方式
表单验证+获取元素的三种方式