表单

最新推荐文章于 2024-07-18 15:09:36 发布

FreOO

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量174

点赞数

分类专栏： Web前端文章标签： html5

本文链接：https://blog.csdn.net/qq_41429521/article/details/104502122

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表单

表单概述
- From表单是HTML的一个重要部分，负责采集和提交用户输入的信息
- 表单主要分为表单标签及表单控件两大类
- 常见的服务器端语言有JSP，PHP，ASP，NET，NodeJS
表单标签

表单标签是一个包含表单元素的控件
- action：submit操作执行的请求地址；
```
<form action="/demo/demo_form.asp">
<input type="text" name="fistName" value="Mickey">
<input type="text" name="lastName" value="Mouse">
<input type="submit" value="Submit">
<p>如果您点击提交，表单数据会被发送到名为demo_form.asp的页面。</p>
```
- 表单的提交不一定要通过submit操作，还可以是Ajax序列化提交表单数据
```
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</title>
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
   $(document).ready(function(){
       $("button").click(function(){
	       $("div").text($("form").serialize());
      });
   });
 </script>
 </head>
 <body>
 <form action="">
 第一个名称: <input type="text" name="FirstName" value="Mickey" /><br>
 最后一个名称: <input type="text" name="LastName" value="Mouse" /><br>
 </form>
 <button>序列化表单值</button>
 <div></div>
 </body>
 </html>
```
  结果：
  
  第一个名称：Mickey
  
  第二个名称：Mouse
  
  序列化表单的值
  
  FirstName=Mickey&LastName=Mouse
Ajax是异步的（自动刷新，浏览器自带的），form表单是同步的（需要刷新，通过JavaScript实现的）
- method(get/post),一般用post，较安全；
- id属性是表单在网页中的唯一标识，name属性用来设置表单元素的名称，尽量保持唯一
- enctype属性说明表单中数据的编码方式；目前浏览器支持的编码方式有三种：
  - application/x-www-form-urlencoded是默认的编码方式，大多数的表单会采取此种编码方式。在发送到服务器之前，所有字符都会进行Unicode编码，并对某些特殊字符进行处理
  - multipart/form-data编码方式常用于表单包含文件上传控件的情况，该方式不对字符进行编码
  - text/plain编码方式遇到空格时，会将其转化为（+），但不对其他的特殊字符进行编码
- target属性：target属性用于<a>标签时，用于指明被连接的内容将在哪个框架或浏览器中进行加载；target属性用于<form>标签时，用户提交表单后将在哪个框架或浏览器中显示表单的处理结果

表单域

单行文本框

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单域-文本框</title>
</head>
<body>
<form>
    <input type="text" /> <br/><br/>
    <input type="text" name="userName" id="userName" value="请输入用户名" /><br/>
    <input type="text" value="请输入用户名" size="25" maxlength="10" /><br/><br/>
    <input type="text" value="请输入用户名" disabled="disabled" /><br/><br/>
    <input type="text" value="请输入用户名" readonly="readonly" />
</form>
</body>
</html>

密码框(显示出来的内容是)*

<input type="password" name="…" size="…" maxlength="…"
       value="…" />

单选按钮
- 单选按钮是在一组数据中选取一个选项
```
<input type="radio" name="…" value="…" checked="checked" />
```
  checked="checked"表示为默认被选中
  
  value表示的是该项的值（男/女；高或矮…）
复选框
- 复选框是指在一组数据中允许用户选择一项或多项，各项之间并不互斥
```
<input type="checkbox" name="…" value="…" checked="checked"/>
```

文件选择框

使用文件选择框时，form表单的enctype属性应该设为multipart/form-data类型，method属性为post,accept属性是用来过滤图片的

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>表单域-文件选择框</title>
</head>
<body>
  <form method="post" enctype="multipart/form-data">
     请选择上传的头像：<input type="file" accept="image/*" name="headImage" />
  </form>
</body>
</html>

隐藏域
```
<input type="hidden" name="…" value="…" />
```
隐藏域的数据虽然不能在浏览器中直接显示，但是可以通过查看源码的方式找到；因此，不要使用隐藏域保存敏感的数据。

隐藏数据也可以通过CSS中的display属性或visibility属性来实现

多行文本框

多行文本框是用来输入较长的文本输入控件

<textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea>

wrap属性用于指定多行文本框的换行方式

属性	描述
off	默认值，文本域中内容足够多时，会在文本域中添加滚动条
virtual	实现文本区内的自动换行，以改善对用户的显示；但在传输给服务器时，文本只在用户按下Enter键的地方进行换行，其他地方没有换行的效果
physical	实现文本区内的自动换行，并以这种形式传送给服务器

列表选择框

列表选择框允许用户从列表中选择一项或多项。在HTML中，可以通过<select>和<option>标签来创建一个列表框。
```
<select name="…" size="…" multiple="multiple">
   <option value="…" selected="selected">选项描述内容</option>
    …
</select>
```
- 列表选择框使用<select>标签进行定义，一个列表可以包含多个列表项<option>
- size属性用于指定列表选择框显示的行数
- multiple="multiple"属性用于指明当前列表框是否允许按住Ctrl键进行多选，默认只能选择一项
- <option>标签的value属性多用于发送给服务器的选项值
- <option>标签的selected="selected"用于设置当前选项默认被选中
- <option>和</option>标签之间的选项描述内容是显示的列表选择项
按钮控件
- 按钮被分为提交按钮，重置按钮，图片按钮和普通按钮，可以通过<input>标签或<button>标签来创建按钮
```
<input type="submit|reset|button|image" name="…" src="…" value="…" />
```
  - button表示创建一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮
  - image表示创建一个图片按钮，点击时也可以提交表单
  - src属性是可选的，当type属性为image时，用来指定图片的URL地址

表单分组

常见的分组标签有**<fieldset>和<legend>**
```
<form>
   <fieldset>
     <legend>请选择个人爱好</legend>
     表单控件...  
   </fieldset>
   ...  
</form>
```
- <fieldset>标签可以看作表单的一个子容器，将所包含的内容以边框环绕方式显示
- <legend>标签则是为<fieldset>边框添加相关的标题

<fieldset>
        <legend>请选择个人爱好</legend>
        <input type="checkbox" name="hobby" value="music" />音乐 <br/>
        <input type="checkbox" name="hobby" value="swimming" />游泳 <br/>
        <input type="checkbox" name="hobby" value="football" />足球 <br/> 
</fieldset>

FreOO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单

表单表单概述From表单是HTML的一个重要部分，负责采集和提交用户输入的信息表单主要分为表单标签及表单控件两大类常见的服务器端语言有JSP，PHP，ASP，NET，NodeJS表单标签<form action="处理数据程序的URL地址" method="get|post" name="表单名称" … ></form>表单标签是一个包含表单元素的控件...
复制链接

扫一扫