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

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

语法：

 form method= 传送方式 action= 服务器文件 

讲解：

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 的区别这一部分内容属于后端程序员考虑的问题。

试一试：在编辑器中的第8行 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 账户: 11 br 12 密码: 14 /form 15 /body 16 /html 

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

语法：

 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 

在浏览器中显示的结果：

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

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、 textarea 标签是成对出现的，以 textarea 开始，以 /textarea 结束。

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

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

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

举例：

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

在浏览器中显示结果：

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

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

在编辑器中第10行 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 

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：

讲解：

1、value：

2、selected= selected ：

设置selected= selected 属性，则该选项就被默认选中。

在浏览器中显示的结果：

来试一试：把“爱好”下拉列表的“旅游”选项设置为默认选项

在编辑器中的第12行补充代码 selected= selected 。

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

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. VeVb.com原创html5视频教程

以上就是html基础教程之与浏览者交互，表单标签的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。