天天看点

表单元素01

文档:

表单元素

一、表单元素汇总
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>
           

继续阅读