当前位置:Gxlcms > html代码 > HTML5中form表单标签用法详解

HTML5中form表单标签用法详解

时间:2021-07-01 10:21:17 帮助过:10人阅读

本文主要和大家分享HTML5中form表单标签用法详解,会以代码实例来和大家分享form的用法,希望能帮助到大家。

语法: <form method = "传送方式" action = "服务器文件">

讲解:1.<form>是成对出现的, 以<form> 开始, 以 </form>结束,表单都必须放在其之间。

2.method 传送方式, get/post 是后端程序员考虑的问题

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

  1. <form method="post" action="save.php">

  2. <label for="username">用户名:</label>

  3. <input type="text" name="username" />

  4. <label for="pass">密码:</label>

  5. <input type="password" name="pass" />

  6. </form>

文本输入框,密码输入框

当用户需要在表单中键入字母,数据等,就要用到文本输入框,文本输入框也可以转化为密码输入框

语法:

  1. <form>

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

  3. </form>


讲解:1.type :

当 type 为 text时,为文本输入框

当 type 为 password 时, 为密码输入框

2.name :为文本框命名,以备后台asp php使用

3.value :为文本输入框设置默认值(一般起提示作用)

  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. <input type = "text" name = "myName" />

  11. <br />

  12. 密码:

  13. <input type = "password " name = "pass"/>

  14. </form>

  15. </body>

  16. </html>

结果:

账户:
密码:

文本域:支持多行文本输入

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

语法:

<textarea rows = "行数" cols = "列数" > 文本 </textarea>


讲解:1.文本输入域以 <textarea>开始 ,以 </textarea>结束

2.rows: 输入文本输入域的行数

3.cols : 输入文本输入域的列数

4.在<textarea></textarea>标签之间输入默认值

  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. <label>个人简介</label>

  10. <textarea rows = "5" cols = "10">在这里输入内容...</textarea></span>

  11. <input type = "submit" value = "确定" name = "submit" />

  12. <input type = "reset" value = "重置" name = "reset" />

  13. </form>

  14. </body>

  15. </html>

结果:

个人简介

<lable>在后面会有详解。


使用单选框,复选框让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好办法,在HTML中,有单选框和复选框,两者的主要区别是 单选框中用户的选项只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

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

讲解:


1. type : radio :控件单选框

checkbox : 控件复选框

2. value: 提供数据到服务器的值

3. name:为控件命名,以备后台程序ASP,PHP使用

4.checked: 当设置 checked = “checked”时,该选项被默认选中。

  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 name = "iForm" method = "post" action = "save.php">

  9. 你是否喜欢旅游?<br />

  10. <input type = "radio" name = "radioLove" value = "喜欢" checked = "checked"/></span>

  11. <input type = "radio" name = "radioLove" value = "不喜欢"/>

  12. <input type = "radio" name =

人气教程排行