html表格留言模板代码（用表格和表单制作如下网页完整html代码）

本文目录

• 用表格和表单制作如下网页完整html代码
• 如何用html+css制作一个留言板
• 我想在一个页面上用HTML代码添加一个小小留言板，能够告诉我怎么做么
• html中提交按钮和重置按钮代码，要怎么输入 还有留言的留言框求高手一段代码，开始到结尾求图
• 求静态HTML留言板程序！
• HTML网页表格代码编写
• 用html做的简易留言簿界面
• html做个表格代码

用表格和表单制作如下网页完整html代码

你好，我按照你的要求写的如下代码，可以直接运行
《center》
《table》
《caption
style="text-decoration:underline;font-weight:bold;"》请留下个人资料《/caption》
《tr》《td》姓名：《/td》《td》《input
type="text"》《/td》《/tr》
《tr》《td》电话：《/td》《td》《input
type="text"》《/td》《/tr》
《tr》《td》E-mail：《/td》《td》《input
type="text"》《/td》《/tr》
《tr》《td》性别：《/td》《td》《input
type="radio"
checked》男　《input
type="radio"》女《/td》《/tr》
《tr》《td》年龄：《/td》《td》《select》《option》20以下《/option》《/select》《/td》《/tr》
《tr》《td》留言版：《/td》《td》《textarea》《/textarea》《/td》《/tr》
《tr》《td》您的爱好：《/td》《td》《input
type="checkbox"》运动　《input
type="checkbox"》阅读《br》《input
type="checkbox"》听音乐　《input
type="checkbox"》旅游《/td》《/tr》
《/table》
《input
type="submit"
value="提交"》　《input
type="reset"
value="全部重写"》
《/center》

如何用html+css制作一个留言板

html+css制作的只是前台页面

CSS代码

这里重点注意的就是 .ds-avatar 的背景要和页面背景一致，这样就能展示出凹进去的效果。

body {background:#333;}

.ds-post-main {position:relative; width:500px;}

.ds-avatar {position:absolute; top:20px; width:31px; height:31px; padding:5px; background:#333;border-radius:50%;}

.ds-avatar a {display:block; width:31px; height:31px; background:#01cc01; border-radius:50%;}

.ds-comment-body {margin-left:20px;padding:10px 10px 10px 30px ;height:80px;background:#01644f;}

HTML代码

这是多说留言评论的结构，其实wordpress也可以这样的。

《div class="ds-post-main"》

《div class="ds-avatar"》

《a href="#nogo" 》 《/a》

《/div》

《div class="ds-comment-body"》 《/div》

《/div》

美化留言评论样式

添加质感：这里主要使用CSS3的圆角（border-radius）、阴影（box-shadow）来实现质感

交互设计：达人使用的交互只是一个简单的CSS3旋转动画（transform:rotate），当然可以使用更多的动画效果来，不过不建议搞得过于花哨。

我想在一个页面上用HTML代码添加一个小小留言板，能够告诉我怎么做么

HTML 代码留言板 一个超简陋的留言版 免费留言板 //评论内容不能保存 因为涉及到数据库
《script》
function Ok_OnClick(event)
{
if(document.getElementsByName("textName").value == ""){
alert("请输入内容");
return;
}//getElementById
var table;
var tableList = document.getElementsByTagName("TABLE");
for(var i = 0 ; i 《 tableList.length ; i++) {
if(tableList.name == "tableName") {
table = tableList
break;
}
}
var value = document.getElementsByName("textName").value;
var index = table.rows.length;
table.insertRow(index);
table.rows(index).insertCell(0);
table.rows(index).cells(0).innerText = value;
document.getElementsByName("textName").value = "";
}
《/script》
《HTML》
《HEAD》
***隐藏网址***
《TITLE》留言版《/TITLE》
《STYLE》
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
《/STYLE》
《/HEAD》
《BODY oncontextmenu="return false;""》
《TABLE name="tableName" width="70%" align="center" cellpadding="0" cellspacing="0"》
《TR》
《TH colspan="4" style=""》留言版《/TH》
《/TR》
《TR》
《TD》呵呵，一个超简陋的留言版 ^_^《/TD》
《/TR》
《/TABLE》
《BR》
《div align="center"》
《textarea rows="2" name="textName" id="textId" cols="20"
style="width: 70%; clip: rect(0pt, 47pt, 18pt, 0pt); font-family: 宋体; font-size: 10pt; font-weight: normal; font-style: normal;text-align: left; vertical-align: middle; text-indent: 0; color: #000000; background-attachment: fixed; background-color: #EEEEEE; border: 1px solid #0xf8f8f8"》
《/textarea》
《/div》
《BR》
《div align="center"》
《input type="button" value="提交" onclick="return Ok_OnClick(window.event);"
style="align:center ; width:60 ; height: 21; clip: rect(0pt, 47pt, 18pt, 0pt); font-family: 宋体; font-size: 10pt; font-weight: normal; font-style: normal; cursor: hand; text-align: center; vertical-align: middle; text-indent: 0; color: #000000; background-attachment: fixed; background-color: #d8d8d8; border: 1px solid #59b4f7"》
《!--position: absolute; left: 342; top: 184; --》
《/div》
《/BODY》
《/HTML》

html中提交按钮和重置按钮代码，要怎么输入 还有留言的留言框求高手一段代码，开始到结尾求图

1、加一个html标签就可以了 ，《input type="reset" style="background:url(背景图片路径);" name="reset" value=""》这个就是了，复制可以了，value设置为空就可以了。

2、合理的运用图片，能够使站点更加丰富多彩，相信有许多喜欢用图片的设计师都遇到过一个问题：用图片实现表单(form)的重置(reset)按钮时，这个按钮并不能重置表单，相反却执行了提交表单的操作，本文说明了这个问题的原因，并给出了相应的解决方案。

3、出现上述问题的原因主要是：普通的按钮是通过类型来区分的，submit 为提交按钮，reset 为重置按钮，而类型为图片(type="image")的按钮，其默认操作是提交表单。因此，如果想用图片实现重置按钮，就需要一些额外的设置了。

4、如果想用图片代替重置按钮，可以用下面的方法：（1）给 type 为 image 的 input 添加onclick事件来实现重置，并通过添加 return false 来避免默认的提交操作：《form method="post" name="testForm_2" action=""》，    《p》《input type="text" name="keyword" /》《/p》，    《input type="image" src="send.gif" /》，    《input type="image" src="reset.gif" ，nclick="javascript:document.forms.reset(); 是将名称为 testForm_2 的表单重置。return false; 是防止提交表单。

5、直接用图片模拟的重置按钮

《form method="post" name="testForm_3" action=""》
《p》《input type="text" name="keyword" /》《/p》
《input type="image" src="send.gif" /》
《imgsrc="reset.gif" alt="Reset" onclick="javascript:document.forms.reset();" style="cursor:pointer;" /》
《/form》

document.forms.reset(); 是将名称为 testForm_2 的表单重置。style="cursor:pointer;" 设置图片悬停时，显示手型光标。两种方法大同小异，在javascript被禁止的情况下，第二种方法按钮不会执行任何操作，而第一种方法却会执行提交操作。

求静态HTML留言板程序！

这个是及其简单的聊天
《html》
《head》
***隐藏网址***
《title》简单聊天《/title》
《style》
* {
font-size:12px;
margin:0;
padding:0;
}
fieldset {
padding:10px;
margin:10px;
width:270px;
color:#333;
border:#06c dashed 1px;
}
legend {
color:#06c;
font-weight:800;
background:#fff;
text-align:center
}
ul {
list-style-type: none;
margin:8px 0 4px 0;
}
li {
margin-top:4px;
}
《/style》
《script type="text/javascript"》
function Trim(text)//去左右空格
{
return text.replace(/^\s+|\s+$/g,"");
}
function sendTxt()
{
if (Trim(document.getElementById("txtSendContent").value)=="")
{
alert("输入的内容为空！");
document.getElementById("txtSendContent").focus();
return false;
}

document.getElementById("ulContent").innerHTML+="《font color=’red’》me say《/font》\r\n:《li》"+getPic(document.getElementById("txtSendContent").value)+"《/li》\r\n";
}
function getPic(text)
{
text=text.replace(/:\)/gim,"《img src=’images/QQ/**ile.gif’ border=’0’ width=’24’ height=’24’》");
text=text.replace(/:\(/gim,"《img src=’images/QQ/cry.gif’ border=’0’ width=’24’ height=’24’》");
text=text.replace(/:-\(/gim,"《img src=’images/QQ/cry.gif’ border=’0’ width=’24’ height=’24’》");
text=text.replace(/:-\)/gim,"《img src=’images/QQ/**ile.gif’ border=’0’ width=’24’ height=’24’》");
text=text.replace(/：）/gim,"《img src=’images/QQ/**ile.gif’ border=’0’ width=’24’ height=’24’》");

//var pattern=new RegExp("\","gim");
text=text.replace(/\/gim,"《img src=’images/QQ/$2’ border=’0’ width=’19’ height=’19’》");
text=text.replace("\r\n","《br》");
return text;
}
function choosePic()
{
var returnValue=window.showModalDialog(’emot.htm’,null,’dialogHeight:240px;dialogWidth:300px’);
document.getElementById("txtSendContent").value+=returnValue;
}
function test()
{
var ss = "Is is the cost of of gasoline going up up?.\n";
var re = /\b(+) \1\b/gim; //创建正则表达式样式.
var rv = ss.replace(re,"$1"); //用一个单词替代两个单词.
alert(rv);
}
《/script》
《/head》
《body style="text-align:center"》
《fieldset style="width:326px"》
《legend》消息显示区《/legend》

《ul id="ulContent" style="text-align:left"》
《/ul》
《/fieldset》
《br》
《fieldset》
《legend》消息发送区《/legend》
《form name="form1" method="post" action=""》
《label》
《textarea name="txtSendContent" id="txtSendContent" cols="40" rows="10"》《/textarea》
《/label》
《label》
《input type="button" name="button" id="button" value="发送" onClick="return sendTxt();"》
《input type="button" name="button" id="button" value="test" onClick="return test();"》
《/label》
《img src="images/QQ/**ile.gif" alt="选择表情符" title="选择表情符" style="cursor:hand" width="24" height="24" onClick="return choosePic();"》
《/form》
《/fieldset》
《/body》
《/html》

HTML网页表格代码编写

1、我们打开记事本进入下图界面。

2、我们要输入制作表格的标签，如下图框内，这个标签里面，我们额外输入了border=\"1\"，这个就是边框为1的意思。

3、大家都知道表格是由行和列组成，html里面是一行一行的输入，我们需要输入下图框内的行的标签。

4、一行又是由多列组成，我们需要输入一行中的每列的数据，就需要下图框内的标签，标签中我们输入的姓名作为内容，这样就表示表格的第一行第一列的内容。

5、这样我们就可以制作一个两行两列的表格，代码如下图所示。

6、打开网页后，出现下图的表格。

1、首先新建一个html，点击《body》《/body》中间，先填入表格内容。

2、内容根据需求来写即可，示例代码如下。

3、然后在《head》《/head》中间输入样式表的样式。

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

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。

6、预览结果如下所示，一个简单的表格就制作出来了。

用html做的简易留言簿界面

《!DOCTYPE html》

《html》

《head》

《meta charset="UTF-8"》

《title》《/title》

《/head》

《body》

《h1 align="center" style="color: red;"》用户留言簿《/h1》

《hr color="red" /》

《form action="baidu.html" method="post"》

《table border="1" cellspacing="0" bordercolor="black" align="center" width="700px" height="300px" style="color: blue;"》

《tr》

《td width="100" height="50"》用 户 名:《/td》

《td》《input type="text" name="name" /》《/td》

《td》密 码:《/td》

《td》《input type="password" name="pwd" /》《/td》

《/tr》

《tr》

《td width="100" height="50"》电子信箱:《/td》

《td》《input type="text" name="email" /》《/td》

《td》民 族:《/td》

《td》

《select name="名族"》

《option value="汉族" selected="selected"》汉族《/option》

《option value="少数名族"》少数民族《/option》

《/select》

《/td》

《/tr》

《tr》

《td width="100" height="50"》性 别:《/td》

《td》《input type="text" name="***" /》

《input type="radio" name="***" value="男" checked="checked" /》

《input type="radio" name="***" value="女" /》

《/td》

《td》爱 好《/td》

《td》

《input type="checkbox" name="lanqiu" value="aihao" /》篮球

《input type="checkbox" name="zuqiu" value="aihao" /》足球

《input type="checkbox" name="paiqiu" value="aihao" /》排球

《input type="checkbox" name="qita" value="aihao" /》其它

《/td》

《/tr》

《tr》

《td width="100" height="100"》留 言:《/td》

《td colspan="4"》

《textarea name="liuyan" rows="5" cols="50"》请多多指教《/textarea》

《/td》

《/tr》

《tr》

《td height="50" colspan="5" align="center"》

《input type="submit" value="确定" /》

《input type="reset" value="重写" /》

《/td》

《/tr》

《/table》

《/form》

《/body》

《/html》

html做个表格代码

html做个表格的步骤如下：

1、首先新建一个html，点击《body》《/body》中间，先填入表格内容；

2、内容根据需求来写即可，示例代码如下：

《table》

《p style="text-align:center "》功课表《/p》

《tr》

《th》语文《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《tr》

《th》数学《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《tr》

《th》英文《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《/table》

3、然后在《head》《/head》中间输入样式表的样式；

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

《style type="text/css"》

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}     

《/style》

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。

6、预览结果如下所示，一个简单的表格就制作出来了。