讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 >

正文

0

0

html基础教程之与浏览者交互，表单标签

零下一度

零下一度

发布时间：2017-05-12 13:57:01

|

1643人浏览过

|

来源于php中文网

原创

一、使用表单标签，与用户交互

 1 
 2 
 3 
 4 
 5 表单标签
 6 
 7 
 8 

 9       
10       
11       
12           
13       
14       
15 
  
16 
17

网站怎样与用户进行交互？答案是使用html表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

讲解：

1.

：
标签是成对出现的，以
开始，以
结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

立即学习“前端免费学习笔记（深入）”；

3.method ： 数据传送的方式（get/post）。post是加密传输；get为地址栏传输，也就是不加密传输。

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在

标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

 试一试：在编辑器中的第8行

标签中加入代码：
method="post" action="save.php"

你是不是输入像如下代码：

从零开始学习html（五）与浏览者交互，表单标签--上0

text：文本框 password：密码框 raido：单选按钮 checkbox：复选框 file：文件选择框 submit：提交按钮

当你按了label中的文字，可以让文字与控件联系在一起用"for"属性将label与另一个元素绑在一起，"for"属性值应该和相关的元素"id"属性值相同。

二、文本输入框、密码输入框

 1 
 2 
 3 
 4 
 5 文本输入框、密码输入框
 6 
 7 
 8 
 9     账户: 
10     
11     

12     密码: 
13 
14  
15 
16

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

1、type：

   当type="text"时，输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：


  姓名：
  
  

  密码：

     

在浏览器中显示的结果：

从零开始学习html（五）与浏览者交互，表单标签--上1

试一试：为表单插入姓名、密码输入框

1.在编辑器中第10行输入代码：

2.在编辑器中第13行输入代码：

属性之间至少有一空格.

hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽
radio 定义单选按钮
range 定义带有 slider 控件的数字字段
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值
search 定义用于搜索的文本字段
submit 定义提交按钮。提交按钮向服务器发送数据
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符
url 定义用于 URL 的文本字段

居然有人说现在很少用value了，估计初学者都不知道placeholder是H5的新属性，并且IE6到IE9是不支持原生的placeholder的。

如果仅仅使用placeholder而不解决兼容性问题（要用placeholder得加入长段兼容性代码为代价），只能说你是在随便看看，而不是在工作。

(红色字为评论区内容，有的暂时看不懂)

三、文本域，支持多行文本输入

 1 
 2 
 3 
 4 
 5 文本域
 6 
 7 
 8 

 9     
10     
11     
12     
13 
 
14 
15

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

1、结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在标签之间可以输入默认值。

举例：

在浏览器中显示结果：

从零开始学习html（五）与浏览者交互，表单标签--上2

Seele AI
Seele AI

3D虚拟游戏生成平台

下载

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

来试一试：修改文本域的列数和行数

在编辑器中第10行

标签的语义一定要根据单词来记忆，这样才会扎实透彻，

preformattde：预定义格式(文本)的意思，这里的