gpt4 book ai didi

html - 自定义 Insightly HTML 联系表单(对齐、间隔字段)

转载 作者:行者123 更新时间:2023-11-28 06:07:36 26 4
gpt4 key购买 nike

提前致歉,我的编码经验非常有限,正在努力掌握 HTML...

虽然从洞察力(下方/附件)为联系表格应用了一些基本代码,但我正在尝试合并所讨论的内容 here

但似乎无法正确处理,只是希望左侧的字段标题与它们后面的实际字段对齐,每个字段之间有一个返回,同时坚持使用 Insightly 所需的编码。

在此先感谢您的帮助!

[编辑 1]

非常感谢,我现在已经设法通过一些 CSS(已附加)使它看起来或多或少符合需要。不幸的是,我不能完全让它按照需要运行,它提交给洞察力很好但是它没有在提交时清除字段,我也没有找到一种工作方法来提供确认它已发送,除了一个特别难看的警报窗口(尤其是在 chrome 中)。任何关于“提交时重置”的帮助以及告诉用户它已发送的方式都很棒!我确实尝试了一些来自 here 的 CSS但无济于事...

      <style type="text/css">
/*************CHSE Stylesheet ***/
body {
background-color: transparent;
height:360px;
width:280px;
}
textarea {
height:70px;
width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>

最佳答案

有吸引力的布局的关键是 DIV 和 CSS。

首先,使用 DIV 将各种输入区域分组,并将每个区域分为左/右(通过 float)。

例如,您可能希望标签和输入字段很好地对齐:

.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
<div class="frmGroup">
<div class="frmLeft"><label for="fn">First Name:</label></div>
<div class="frmRight"><input id="fn" type="text" /></div>
</div>
<div class="frmGroup">
<div class="frmLeft">Last Name:</div>
<div class="frmRight"><input type="text" /></div>
</div>
<div id="thisone">
<textarea cols="50" rows="5"></textarea>
</div>
</form>

float指令特别有用,因为它允许您并排对齐 DIV。然而!它还从 HTML“流”中删除了 DIV,这意味着它们占用的垂直空间为零。为了解决这个问题,添加 overflow:____到父DIV。 例如,我使用了 overflow:hidden ].在底部的 jsFiddle 中,通过删除/添加该行进行试验。

您还可以为特定的 DIV 指定一个 ID 并将其设置为在上/下/左/右有边距或填充。

DIV 的额外优势是 block元素,这与添加 <br> 具有相同的效果到最后。

*另请注意 <label>标签实际上只对按钮、复选框等有用,因为它们允许用户通过单击文本标签来单击按钮/复选框。

Here is a jsFiddle您可以试验上面的演示。

关于html - 自定义 Insightly HTML 联系表单(对齐、间隔字段),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36367413/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com