HTML表单(FORM)标记(TAGS)

基本语法

<------Form Basic------->

表单的基本语法

<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>

*=GET, POST


<------Input Basic------->

表单中提供给用户的输入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script


<--################## Text & Passwd ########################-->

文字输入和密码输入

<------Text & Password------->*=text, password

<input type=*>
<input type=* value=**>

<form action=/cgi-bin/post-query method=POST>您的姓名: <input type=text name=姓名><br>您的主页的网址: <input type=text name=网址 value=http://><br>密码: <input type=password name=密码><br><input type=submit value="发送"><input type=reset value="重设"></form>

您的姓名:
您的主页的网址:
密码:


<------Text & Password -- Size, Max ------->

<input type=* size=**>
<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST><input type=text name=a01 size=40><br><input type=text name=a02 maxlength=5><br><input type=submit><input type=reset></form>

<--################## Checkbox & Radio ########################-->

复选框(Checkbox) 和 单选框(RadioButton)

<------Checkbox------->

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST><input type=checkbox name=水果1>        Banana<p><input type=checkbox name=水果2 checked>        Apple<p><input type=checkbox name=水果3 value=橘子>        Orange<p><input type=submit><input type=reset></form>

Banana
Apple

Orange


<------Checkbox------->

<input type=radio value=**>
<input type=radio value=** checked>

<form action=/cgi-bin/post-query method=POST><input type=radio name=水果>        Banana<p><input type=radio name=水果 checked>        Apple<p><input type=radio name=水果 value=橘子>        Orange<p><input type=submit><input type=reset></form>

Banana
Apple

Orange


<--################## Image ########################-->

图象坐标

在下面选则一个系数后,在图象上点一下,就知道什么是图象坐标了!

<input type=image src=url>

<form action=/cgi-bin/post-query method=POST><input type=image name=face src=http://www.cncms.com.cn/html/f.gif><p><input type=radio name=zoom value=2 checked>x2<input type=radio name=zoom value=4>x4<input type=radio name=zoom value=6>x6<p><input type=reset></form>

x2 x4 x6


<--################## Hidden ########################-->

隐藏表单的元素

<input type=hidden value=*>

<form action=/cgi-bin/post-query method=POST><input type=hidden name=add value=hoge@hoge.jp>Here is a hidden element. <p><input type=submit><input type=reset></form>

Here is a hidden element.


<--################## Select ########################-->

列表框(Selectable Menu)

<------Basic------->

基本语法

<select name=*>
<option> ...
</select>

<------select & option------->

<option selected>
<option value=**>

<form action=/cgi-bin/post-query method=POST><select name=fruits>        <option>Banana        <option selected>Apple        <option value=My_Favorite>Orange</select><p><input type=submit><input type=reset></form>

BananaAppleOrange


<------size & multiple------->

<select size=**>

<form action=/cgi-bin/post-query method=POST><select name=fruits size=3>        <option>Banana        <option selected>Apple        <option value=My_Favorite>Orange        <option>Peach</select><p><input type=submit><input type=reset></form>

BananaAppleOrangePeach


<------multiple------->

<select size=** multiple>

注意,是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样)

<form action=/cgi-bin/post-query method=POST><select name=fruits size=3 multiple>        <option selected>Banana        <option selected>Apple        <option value=My_Favorite>Orange        <option selected>Peach</select><p><input type=submit><input type=reset></form>

BananaAppleOrangePeach


<--################## Textarea ########################-->

文本区域

<textarea name=* rows=** cols=**> ... <textarea>

<form action=/cgi-bin/post-query method=POST><textarea name=comment rows=5 cols=60></textarea><P><input type=submit><input type=reset></form>

<------Word Wrapping Off------->

对于很长的行是否进行换行的设置(Word Wrapping)

<textarea wrap=off> ... </textarea>

不换行,是缺省设置。

<------Word Wrapping Soft------->

<textarea wrap=soft> ... </textarea>

“软换行”,好象 MS-WORD 里的“软回车”。

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

<------Word Wrapping Hard------->

<textarea wrap=hard> ... </textarea>

“硬换行”,好象 MS-WORD 里的“硬回车”。

<form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索密码
, 表单
, 输入
, 语法
, apple
图象
html5 form表单 模板、html form表单、html5 form表单、html form表单提交、html获取form表单数据,以便于您获取更多的相关知识。

时间: 2024-09-18 20:11:57

HTML表单(FORM)标记(TAGS)的相关文章

HTML表单&lt;FORM&gt;标记概述

 表单是实现动态网页的一种主要的外在形式.表单和表单域并不具有排版的能力,表单网页的制作最终还是要由表格组织起来.html表单是html页面与浏览器端实现交互的重要手段.利用表单可以收集客户端提交的有关信息.  在浏览网站时经常会遇到表单,它是网站实现互动功能的重要组成部分.无论网站使用的是那种形式的语言来实现网站的互动功能,例如ASP.PHP.JSP,表单已经成为它们统一的外在形式.  表单的主要功能是收集信息,具体说是收集浏览者的信息.例如在网上要申请一个电子信箱,就必须按要求填写完成网站提

html-关于表单form的相关问题(基础)

问题描述 关于表单form的相关问题(基础) 我这两天刚开始学习HTML,请求大神们这个效果(里面的"公司所在地"后面的北京和东城)怎么用标记select实现呀~~ 解决方案 javascript省市联动示例 解决方案二: 就是表单类型为select后,指定表单选项, 就能显示这个效果了. 完整的html教程地址:http://www.w3school.com.cn/h.asp 解决方案三: 百度一下标签 解决方案四: <select name="city"

Jquery基于Ajax方法自定义无刷新提交表单Form实例_AJAX相关

本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

用JS动态改变表单form里的action值属性的两种方法_javascript技巧

方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

Jquery基于Ajax方法自定义无刷新提交表单Form实例

本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下:<form id="Form1" action="action.aspx" method="post

用PHP的超级变量$_GET获取HTML表单(Form) 数据_php基础

$_GET 是 PHP 的超级变量之一. 当 HTML 表单 (HTML Form) 的 method 为 get 时 , $_GET 用来获取 HTML Form 的数据. 获取 HTML 表单 (HTML Form) 文本输入框 (input type="text") 数据 下面是一个 HTML 文件,这个 HTML 含有一个 HTML 表单 (HTML Form),主要用来让用户输入用户姓名的. 复制代码 代码如下: <html> <head><ti

Jquery提交表单 Form.js官方插件介绍_jquery

先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu

用 Javascript 验证表单(form)中多选框(checkbox)值_表单特效

本文介绍了一个较为通用的获取 checkbox 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中多选框(checkbox)的值 // 作者: CodeBit function getCheckboxValue(checkbox) { if (!checkbox.length && checkbox.type.toLowerCase(

用 Javascript 验证表单(form)中的单选(radio)值_表单特效

本文介绍了一个较为通用的获取 radio 值的方法,希望对新手有用. 复制代码 代码如下: <script type="text/javascript"> // 说明: 用 Javascript 验证表单(form)中的单选(radio)值 // 作者: CodeBit function getRadioValue(radio) { if (!radio.length && radio.type.toLowerCase() == 'radio') { ret