表单的部分知识

最新推荐文章于 2021-07-26 22:17:34 发布

Lazy_idle

最新推荐文章于 2021-07-26 22:17:34 发布

阅读量2.4k

点赞数 4

分类专栏： Web前端文章标签： html css web

本文链接：https://blog.csdn.net/kokomo_tender/article/details/114945416

版权

Web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、表单介绍

1、表单是什么

表单是网页制作中非常重要的内容，是Web开发中实现输入功能的。用户通过表单可以在网页中录入数据、编辑数据。例如登录、注册、修改密码、编辑资料等。

2、HTML中的表单

在HTML当中，表单使用标签来定义。标签包含所有的表单元素，并且会告诉浏览器表达中的数据会提交到哪里，以及使用什么方式发送。

<body>

<form action="success.html" method="post" name="testForm"></form>

</body>

说明：

标签类似于一个容器标签，上面的这段代码，在浏览器窗口不会有什么视觉上的效果。
action属性指定表单数据将提交到哪个位置，可以使用绝对路径或相对路径。

method属性指定数据发送的方式，有get和post两种方式，在表单当中，我们常常使用post方式。这两种方式的区别如下：

二、表单元素

表单的元素由标签、标签、标签、标签、标签等构成。在HTML4版本中表单元素都要包含在标签中才有效，在HTML5版本中可以放在标签外，但表单元素需要使用form属性指明其所属的表单id。常用表单元素标签的作用及所属版本如下：

1、标签

在正式讨论常用的表单元素前，我们先来了解一下标签。标签为表单元素定义标注（标记），它常常用来显示我们在表单中看到的数据名称。

<body>

  <form action="success.html" method="post" name="testForm">
    <label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" />
  </form>

</body>

说明：

标签中for属性的值应该和标签中id的属性值一致，这两个表单元素就会被关联起来，之后在浏览器中点击标签时，对应的标签就会获得焦点，这一特性为用户改进了可用性。

2、标签

是最为常见，使用最为频繁的表单元素标签。表单中大部分的数据借由标签来输入。标签的语法格式如下：

<input 
  type="元素类型" 
  name="元素名称" 
  value=”元素值”
  id="标签唯一标识" 
  size="元素大小"  
  maxlength="元素可输入字符的上限"
  checked 元素被选中
  required="required"
  readonly="readonly" 
  placeholder="提示文本"
  pattern="正则表达式"
  autofocus=" autofocus " />

说明：

type属性是标签中最为重要的属性，type属性决定了标签的具体表现形式。而且，根据浏览器的不同或者设备的不同，标签的具体表现形式可能有所不同。
name属性表示元素的名称，也会作为表单数据提交时的参数名称。
value属性表示元素将要提交的参数值。
id属性表示该标签的唯一标识。
size属性需要一个数字，表示以字符个数设定的元素宽度。
maxlength属性需要一个数字，表示元素接受字符数的上限。
checked属性表示元素被选中。
required属性表示元素内容不能为空，必填。 readonly属性表示元素内容为可读，此时，元素内容不允许再被编辑。
placeholder属性将会为元素显示一个提示文本。 pattern属性将为元素指定一个正则表达式，输入的内容必须与该正则表达式匹配。
autofocus属性表示在页面加载后，元素自动获取焦点。还有其他一些属性，将会在遇到的时候进行介绍。

2.1、type=“text”

当<input>标签的type属性值为text时，<input>标签显示为单行文本框。

<body>`

  <form action="success.html" method="post" name="testForm">
    <label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" placeholder="请输入用户名" value="" />
  </form>

`</body>`

说明：

placeholeder`属性的值会作为提示信息，出现在文本框中，提示用户输入，但不会影响客户的输入值。
value属性中的值为表单提交时传递到<form>标签action属性指定地址的参数值，我们在浏览器文本框中输入文字时，实质是在为value属性赋值。

2.2、type=“password”

当<input>标签的type属性值为password时，<input>标签显示为密码框。

<body>

  <form action="success.html" method="post" name="testForm">
    <label for="user-pass">用户密码</label>
    <input type="password" id="user-pass" name="userPass" placeholder="请输入用户密码" value="" />
  </form>

</body>

说明：

用户在密码框中进行输入时，浏览器会自动隐藏输入的文字。

2.3、type=“radio”

当<input>标签的type属性值为radio时，<input>标签显示为单选按钮。

<body>

  <form action="success.html" method="post" name="testForm">
    用户性别<br/>
	<label for="user-gender-male">男</label>
    <input type="radio" id="user-gender-male" name="userGender" value="1" checked />
	<label for="user-gender-female">女</label>
    <input type="radio" id="user-gender-female" name="userGender" value="0" />
  </form>

</body>

说明：

单选按钮经常同时出现多个，当多个单选按钮的name属性一样时，为一组单选按钮，一组单选按钮同时只能选中其中1个。
在单选按钮中添加checked属性时，表示该单选按钮默认选中，checked是checked="checked"的简写形式。

2.4、type=“checkbox”

当<input>标签的type属性值为checkbox时，<input>标签显示为复选框。

<body>

  <form action="success.html" method="post" name="testForm">
    个人爱好<br/>
	<label for="user-hobby-basketball">篮球</label>
    <input type="checkbox" id="user-hobby-basketball" name="userHobby" value="0" checked />
	<label for="user-hobby-football">足球</label>
    <input type="checkbox" id="user-hobby-football" name="userHobby" value="1" />
	<label for="user-hobby-volleyball">排球</label>
    <input type="checkbox" id="user-hobby-volleyball" name="userHobby" value="2" />
	<label for="user-hobby-badminton">羽毛球</label>
    <input type="checkbox" id="user-hobby-badminton" name="userHobby" value="3" />
  </form>

</body>

说明：

复选框经常同时出现多个，当多个复选框的name属性一样时，为一组复选框，一组复选框同时可以选中一个、多个或都不选。
在复选框中添加checked属性时，表示该单选按钮默认选中。

2.5、type=“file”

当<input>标签的type属性值为file时，<input>标签显示为文件域。
下面是一个示例：

<body>

  <form action="success.html" method="post" name="testForm">
	<label for="user-header">用户头像</label>
    <input type="file" id="user-header" name="userHeader" accept=".jpg,.png"/>
  </form>

</body>

说明：

文件域会自带一个按钮，点击之后会弹出文件选择框。
accept属性接受一个逗号分隔的MIME类型字符串，用于限制允许上传的文件类型。下面是几个例子:

2.6、type=“submit”

当<input>标签的type属性值为submit时，<input>标签显示为提交按钮。
下面是一个示例：

<body>

  <form action="success.html" method="post" name="testForm">
    <input type="submit" value="提交" />
  </form>

</body>

说明：

提交按钮在点击后，会触发所在表单的提交事件。所谓提交，就是将表单中用户输入的数据打包，发
送给标签action属性所指向的地址。
提交按钮的value属性值会显示在按钮上

2.7、type=“reset”

当标签的type属性值为reset时，标签显示为重置按钮。
下面是一个示例：

<body>

  <form action="success.html" method="post" name="testForm">
	<label for="user-name">用户名称</label>
    <input type="text" id="user-name" name="userName" 
            placeholder="请输入用户名" value="" />
	<br/>
	<label for="user-pass">用户密码</label>
    <input type="password" id="user-pass" name="userPass" 
            placeholder="请输入用户密码" value="" />
	<br/>
    <input type="reset" value="重置" />
  </form>

</body>

说明：

重置按钮在点击后，会触发所在表单的重置事件，所谓重置，就是将表单中用户输入的数据全部清空，使表单恢复到初始化状态。

2.8、type=“button”

当<input>标签的type属性值为button时，<input>标签显示为普通按钮。
下面是一个示例：

<body>

  <form action="success.html" method="post" name="testForm">
    <input type="button" value="按钮" />
  </form>

</body>

说明：

普通按钮在点击后，默认什么都不会发生，需要使用客户端脚本（通常为JavaScript）来自定义普通按钮点击之后所要执行的事件。

2.9、type=“image”

当<input>标签的type属性值为image时，<input>标签显示为图片按钮。
下面是一个示例：

<body>

  <form action="success.html" method="post" name="testForm">
    <input type="image" src="images/submit.png" />
  </form>

</body>

说明：

图片按钮的src属性用来指定一张图片，该图片会显示在按钮上。
图片按钮在点击后，也会触发表单的提交事件。

三、块标签和行标签（内联标签）：

块标签：在浏览器中可以单独占一行

行标签：。。。。。。。。。。不单独占一行。

1、常用的块标签

标题标签：

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

段落标签：<p>

水平线标签：<hr/>

有序标签：<ol>

无序标签：<ul>

描述标签：<dl>

2、常用的行标签

段落标签：<span>

图片：<img>

视频：<video>

音频：<audio>

三、块标签和行标签（内联标签）：

块标签：在浏览器中可以单独占一行

行标签：。。。。。。。。。。不单独占一行。

<strong>在浏览器中默认显示为粗体。

Lazy_idle

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
表单的部分知识

一、表单介绍1、表单是什么表单是网页制作中非常重要的内容，是Web开发中实现输入功能的。用户通过表单可以在网页中录入数据、编辑数据。例如登录、注册、修改密码、编辑资料等。2、HTML中的表单在HTML当中，表单使用标签来定义。标签包含所有的表单元素，并且会告诉浏览器表达中的数据会提交到哪里，以及使用什么方式发送。<body><form action="success.html" method="post" name="testForm"></form>&
复制链接

扫一扫