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

最新推荐文章于 2025-10-24 00:11:59 发布

转载最新推荐文章于 2025-10-24 00:11:59 发布 · 143 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=i12jjj2ab&title=%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0html%EF%BC%88%E4%BA%94%EF%BC%89%E4%B8%8E%E6%B5%8F%E8%A7%88%E8%80%85%E4%BA%A4%E4%BA%92%EF%BC%8C%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E2%80%94%E2%80

前端专栏收录该内容

493 篇文章

订阅专栏

本文深入讲解HTML表单的各种元素及属性，包括文本框、密码框、单选框、复选框、下拉列表等，帮助读者掌握如何创建交互式表单。

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

 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)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

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、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

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

试一试：在编辑器中的第

行<form>标签中加入代码：

method="post" action="save.php"

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

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

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

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

 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  method="post" action="save.php">
 9     账户: 
10     
11     <br>
12     密码: 
13 
14 </form> 
15 </body>
16 </html>

文本输入框、密码输入框

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

语法：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

、type：

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

输入框

   当type="password"时,

输入框为密码输入框。

、name：

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

、value：

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

举例

：

<form>
  姓名：
  <input type="text" name="myName">
  <br/>
  密码：
  <input type="password" name="pass">
</form>

在浏览器中显示的结果：

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

1.在编辑器中第

行输入代码：

<input  type="text"  name="myName" />

2.在编辑器中第

行输入代码：

<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>

、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

、cols ：

多行输入域的列数。

、rows ：

多行输入域的行数。

、在<textarea></textarea>标签之间可以输入默认值。

举例

：

<form  method="post" action="save.php">
 <label>
联系我们</label>
 <textarea cols="50" rows="10" >
在这里输入内容...
</textarea>
</form>

在浏览器中显示结果：

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

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

在编辑器中第

行<textarea>标签中补充代码

cols="50"

rows="10"

两个属性值，cols属性控制文本域的列数，rows属性控制文本域的行数。

标签的语义一定要根据单词来记忆，这样才会扎实透彻，<pre>preformattde：预定义格式(文本)的意思，这里的<textarea>是多行文本区域的意思，

根据意思就知道不同了，而且<textarea>中的默认字样，用户可以自行更改的，<pre>中的内容，用户只能看不能动！

col与rows设定的值只会影响输入框的大小，不会影响你输入多少字

<textarea>是文本域输入
<input>是输入一行

四、使用单选框、复选框，让用户选择

 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     <label>男</label>
11     <input type="radio" value="1"  name="gender-man" />
12     <label>女</label>
13     <input type="radio" value="2"  name="gender-woman" />
14 </form>
15 </body>
16 </html>

使用单选框、复选框，让用户选择

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，

两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:

语法：

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

如下面代码：

在浏览器中显示的结果：

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

来试一试：修改单选框代码错误（男、女可以同时选择），使其具有单选作用。

1、在编辑器中第11行、13行代码有错误，请改正。

记住：

1、同一组单选框

name

命名要一致。

2、你是否输入像下面的代码：

<label>男</label>
<input type="radio" value="1"  name="gender" />
<label>女</label>
<input type="radio" value="2"  name="gender" />

五、使用下拉列表框，节省空间

 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     <select>
11       <option value="看书">看书</option>
12       <option value="旅游">旅游</option>
13       <option value="运动">运动</option>
14       <option value="购物">购物</option>
15     </select>
16 </form>
17 </body>
18 </html>