简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

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

零下一度
发布： 2017-05-12 13:57:01
原创
1469 人浏览过

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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>表单标签</title>
 6 </head>
 7 <body>
 8 <form>
 9       <label for="username">用户名:</label>
10       <input type="text"  name="username" id="username" value="" />
11       <label for="pass">密码:</label>
12       <input type="password"  name="pass" id="pass" value="" />    
13       <input type="submit" value="确定"  name="submit" />
14       <input type="reset" value="重置" name="reset" />
15 </form>  
16 </body>
17 </html>
登录后复制

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

语法：

<form method="传送方式" action="服务器文件">
登录后复制

讲解：

1.

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

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

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

<form    method="post"   action="save.php">
        <label for="username">用户名:</label>
        <input type="text" name="username" />
        <label for="pass">密码:</label>
        <input type="password" name="pass" />
</form>
登录后复制

注意:

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
登录后复制

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

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>
登录后复制

1、type：

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

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

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

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

举例：

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>
登录后复制

在浏览器中显示的结果：

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

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

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

<input  type="text"  name="myName" />
登录后复制

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

<input  type="password"  name="pass" />
登录后复制

属性之间至少有一空格.

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

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

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

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

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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>文本域</title>
 6 </head>
 7 <body>
 8 <form action="save.php" method="post" >
 9     <label>个人简介：</label>
10     <textarea>在这里输入内容...</textarea>
11     <input type="submit" value="确定"  name="submit" />
12     <input type="reset" value="重置"  name="reset" />
13 </form> 
14 </body>
15 </html>
登录后复制

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

语法：

<textarea  rows="行数" cols="列数">文本</textarea>
登录后复制

1、结束。

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

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

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

举例：
登录后复制

在浏览器中显示结果：

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

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

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

在编辑器中第10行