需要一个HTML模板,用来做简单的表单数据录入

需要一个HTML模板,用来做简单的表单数据录入,第1张

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:1pxsolidblack

font-size:12px

text-align:center

}

</style>

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

6.预览结果如下图所示,一个制作简单的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>xyk类型</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">yhk号:</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([type=radio]), 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([type=submit]):focus, form#payment textarea:focus {

background: #eaeaea

border: #F00 solid 1px

}

form#payment input[type=radio] {

float: left

margin-right: 5px

}

</style>

3、漂亮的表单生成。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6236702.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存