html表单代码大全（HTML表单介绍）

本文目录

• HTML表单介绍
• 怎样在html页面中制作一个简单的表格
• html表单的几种提交方式总结
• html表单里面的图片点击相应图片跳转到本页其他去看代码怎么写
• 求html5代码，编写一个form表单，实现一个学生信息输入
• html 怎么设置漂亮的表单样式
• 如何用HTML来制作表格

HTML表单介绍

HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
form action="
请输入你的姓名：
input type="text" name="yourname"
input type="submit" value="提交"
/form
学习HTML表单(Form)最关键要掌握的有三个要点：
表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的
***隐藏网址***
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：
表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)
表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：
input type="text" name="yourname"
表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：
input type="checkbox" name="fruit" value ="apple"苹果br
input type="checkbox" name="fruit" value ="orange"桔子br
input type="checkbox" name="fruit" value ="mango"芒果br
用checked表示缺省已选的选项。
input type="checkbox" name="fruit" value ="orange" checked桔子br
表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：
input type="radio" name="fruit" value = "Apple"苹果br
input type="radio" name="fruit" value = "Orange"桔子br
input type="radio" name="fruit" value = "Mango"芒果br
用checked表示缺省已选的选项。
input type="radio" name="fruit" value = "Orange" checked桔子br
表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
select name="fruit"
option value="apple"苹果
option value="orange"桔子
option value="mango"芒果
/select
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
select name="fruit" multiple
用户还可以用size属性来改变下拉框(Select)的大小。
表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
textarea name="yoursuggest" cols ="50" rows = "3"/textarea
其中cols表示textarea的宽度，rows表示textarea的高度。
表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：
input type="password" name="yourpw"
表单控件(Form Control)：提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：
input type="submit" value="提交"
表单控件(Form Control)：图片提交(input type="image")
input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
input type="image" src ="images/icons/go.gif"
alt = "提交" NAME="imgsubmit"

怎样在html页面中制作一个简单的表格

HTML做个简单的表格。如下参考：

1、首先新建一个html，点击中间，先填入表格内容：

2、内容可根据要求编写，示例代码如下：

功课表

语文

7:00-7:40

7:50-8:30

数学

7:00-7:40

7:50-8:30

英文

7:00-7:40

7:50-8:30

3、然后在中间输入样式表的样式，：

4、样式也可以根据个人需要设置，设置单元格的宽度高度，合并单元格，位置，颜色等，示例代码如下：

5、注意，此代码“table的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。

6、预览结果，一个制作简单的HTML表格。

html表单的几种提交方式总结

最普通最常用最一般的方法就是用submit type..看代码： 

复制代码

代码如下:

《form name=”form” method=”post” action=”#"》 
《input type=”submit” name=”submit” value=”提交"》 
《/form》

另外，还有一种常用的方法是使用图片： 

复制代码

代码如下:

《form name=”form” method=”post” action=”# "》 
《input type=”image” name=”submit” src=”btnSubmit.jpg”》 
《/form》

第三种是使用链接来提交表单，用到了javascript的DOM模型： 

复制代码

代码如下:

《form name=”form” method=”post” action=”#”》 
《a href=”javascript:form.submit();”》提交《/a》 
《/form》

这种方法实际上是调用了一个javascript函数，使用javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中： 

复制代码

代码如下:

《form name=”form” method=”post” action=”#”》 
《div onclick=”javascript:form.submit();”》 
《span》提交《/span》 
《/div》 
《/form》

但是，如果一个表单里有需要有多个提交按钮怎么办呢？ 
比如一个表单里的提交按钮所指向的处理页面不同，这样由于表单在定义的时候就已经确定下表单数据的处理页面，所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。 
首先定义一个函数： 

复制代码

代码如下:

《script language=javascript》 
function query(){ 
form.action=”query.php”; 
form.submit();} 
function update(){ 
form.action=”update.php”; 
form.submit();} 
《/script》

通过javascript改变form的action属性值，这样就可以实现多提交按钮而且功能不同了，页面内代码如下： 

复制代码

代码如下:

《form name=”form” method=”post” action=”#”》 
《input type=”button” name=”query” onclick=”query();” value=”查询”》 
《input type=”button” name=”update” onclick=”update();” value=”更新”》 
《/form》

上面一段代码，使用的是普通的按钮，而提交功能的实现方法是在它的onclick事件中调用javascript函数. 
有了上面这几种提交表单的方法,我想差不多够应付复杂的表单了.

html表单里面的图片点击相应图片跳转到本页其他去看代码怎么写

需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。

参考代码如下：

《map name="Map" id="Map"》
  《area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" /》
  《area shape="rect" coords="89,175,394,264" href="#" /》
  《area shape="rect" coords="95,293,386,355" href="#" /》
《/map》

网页热点使用方法：

个人推荐Dreamwever可视化操作来创建网页热点。

1、打开Dreamwever，新建一个页面，插入一张图片，

2、使用左下角的热点工具。

3、点击“矩形”或其他热点工具，再在图片上拖动位置

4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。

求html5代码，编写一个form表单，实现一个学生信息输入

《!DOCTYPE html》
《html》
《head》
  《meta name="viewport" content="width=device-width, initial-scale=1.0"》
  《style type="text/css"》
  input,
  input,
  label {
    cursor: pointer;
  }
  《/style》
《/head》
《body》
  《form action="地址" methed="post"》
    学号：
    《input type="text" name="user" placeholder="请输入用户名" /》
    《br /》
    密码：《input type="text" name="pwd" placeholder="请输入密码" password="键盘" /》
    《br /》
    性别：
    《input type="radio" name="sex" id="sex1" value="男" checked》《label for="sex1"》男《/label /》
    《input type="radio" name="sex" id="sex2" value="女"》《label for="sex2"》女《/label /》
    《br /》
    电话：《input type="text" name="phone" placeholder="请输入电话号码" /》
    《br /》
    邮箱：《input type="text" name="email" placeholder="请输入注册邮箱" /》
    《br /》
    出生年月：《input type="text" name="birth" /》
    《br /》
    爱好：
    《input type="checkbox" name="like" id="like1" value="篮球"》《label for="like1"》篮球《/label /》
    《input type="checkbox" name="like" id="like2" value="足球"》《label for="like2"》足球《/label /》
    《input type="checkbox" name="like" id="like3" value="羽毛球"》《label for="like3"》羽毛球《/label /》
    《br /》
    《input type="submit" value="提交" /》
    《input type="reset" value="重置" /》
  《/form》
《/body》
《/html》

html 怎么设置漂亮的表单样式

html 设置漂亮的表单样式，以下是代码：
1、编写一个from表单
《form id="payment"》
《fieldset》
《legend》用户详细资料《/legend》
《ol》
《li》
《label for="name"》用户名称：《/label》
《input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus》
《/li》
《li》
《label for="email"》邮件地址：《/label》
《input id="email" name="email" type="email" placeholder="example@163.com" required》
《/li》
《li》
《label for="phone"》联系电话：《/label》
《input id="phone" name="phone" type="tel" placeholder="010-12345678" required》
《/li》
《/ol》
《/fieldset》
《fieldset》
《legend》家庭住址（收货地址）：《/legend》
《ol》
《li》
《label for="address"》详细地址：《/label》
《textarea id="address" name="address" rows="1" required》《/textarea》
《/li》
《li》
《label for="postcode"》邮政编码：《/label》
《input id="postcode" name="postcode" type="text" required》
《/li》
《li》
《label for="country"》国 家：《/label》
《input id="country" name="country" type="text" required》
《/li》
《/ol》
《/fieldset》
《fieldset》
《legend》付费方式《/legend》
《ol》
《li》
《fieldset》
《legend》信用卡类型《/legend》
《ol》
《li》
《input id="visa" name="cardtype" type="radio"》
《label for="visa"》中国工商银行《/label》
《/li》
《li》
《input id="amex" name="cardtype" type="radio"》
《label for="amex"》中国人民银行《/label》
《/li》
《li》
《input id="mastercard" name="cardtype" type="radio"》
《label for="mastercard"》中国建设银行《/label》
《/li》
《/ol》
《/fieldset》
《/li》
《li》
《label for="cardnumber"》银行卡号：《/label》
《input id="cardnumber" name="cardnumber" type="number" required》
《/li》
《li》
《label for="secure"》验 证 码：《/label》
《input id="secure" name="secure" type="number" required》
《/li》
《li》
《label for="namecard"》持 卡 人：《/label》
《input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户！" required》
《/li》
《/ol》
《/fieldset》
《fieldset》
《button type="submit"》现在购买《/button》
《/fieldset》
《/form》
2、编写css样式
《style type="text/css"》
/*分别定义HTML中和标记之的距离样式*/
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
/*定义《body》标记样式*/
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 20px;

}
/*定义付费内容的样式*/
form#payment {
background: #9cbc2c;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:auto;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type { margin-bottom: 0; }
form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment 》 fieldset 》 legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li {
background: #b9cf6a;
background: rgba(255, 255, 255, .3);
border-color: #e3ebc3;
border-color: rgba(255, 255, 255, .6);
border-style: solid;
border-width: 2px;
-webkit-border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}
form#payment label {
float: left;
font-size: 13px;
width: 110px;
}
form#payment fieldset fieldset label {
background: none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment fieldset fieldset label:hover { cursor: pointer; }
form#payment input:not(), form#payment textarea {
background: #ffffff;
border: #FC3 solid 1px;
-webkit-border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#payment input:not():focus, form#payment textarea:focus {
background: #eaeaea;
border: #F00 solid 1px;
}
form#payment input {
float: left;
margin-right: 5px;
}
《/style》
3、漂亮的表单生成。

如何用HTML来制作表格

HTML中的表格由 《table》 标签来定义，表格是由单元格组成的，单元格可以放入文字、图片、表格等内容。下面，我们来看看如何用HTML来制作表格吧。

代码，先用《table》标签定义一个表格，其中border表示边框，border="1"表示边框为1个像素，数值越大，边框就越粗。

《table border="1"》
《/table》

《tr》元素表示表格中的行，比如创建两行

《tr》《/tr》表示一行。

单元格

HTML表格的单元格用《td》标签表示，如下图所示：
《td》语文《/td》

表格

就做好一个HTML表格，显示图如下：
总代码：
《body》
《table border="1"》

《tr》
《td》语文《/td》
《td》数学《/td》
《/tr》

《tr》
《td》英语《/td》
《td》化学《/td》
《/tr》

特别提示

表格的标签：《table》、《tr》、《td》三个标签。