<?php
if (array_key_exists( 'submit', $_POST)) {
if(trim($_POST[ 'g-recaptcha-response'])=="" ) {
$captcha_missing=true;
}
}
?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<ul>
<li><a href="#a">Section A</a>
</li>
<li><a href="#b">Contact Form</a>
</li>
</ul>
</div>
<h1><span>Lorem Ipsum</span></h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<div id="a">
<h1>Section A</h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor fringilla sapien eget dictum. Donec tristique placerat urna, eu posuere libero tincidunt ac. Mauris condimentum, leo a tempor interdum, lacus augue pellentesque erat, quis elementum
mauris nisi tempor nibh. Duis auctor lacus at tortor venenatis maximus. Nullam ultricies orci eget mi lacinia ornare. Praesent ut efficitur massa. Ut leo ex, malesuada vel orci at, egestas consectetur justo. Vivamus rhoncus arcu sit amet nisi dignissim
pretium. Nulla volutpat tincidunt felis. Fusce vitae aliquam metus. Suspendisse laoreet nisi mauris, a sagittis turpis convallis vel. Maecenas mollis urna id ipsum condimentum placerat. Fusce mattis enim id egestas ullamcorper. Aliquam ac porttitor
ipsum, sed finibus velit. Nullam mattis molestie nisi a facilisis. Nunc faucibus, augue nec mollis ornare, neque neque aliquam lorem, in commodo elit dolor dapibus felis.</p>
</div>
<br />
<br />
<br />
<br />
<br />
<div id="b">
<h1>Contact Form</h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
</div>
<br />
<div>
<form>
<div class="g-recaptcha" data-sitekey="xxxxxxxxx"></div>
<input type='email' id="email" name='email' style='width: 200px' placeholder='email'>
<button id="submit" name="submit" type='submit'>submit</button>
<div>
<?php if ($captcha_missing) { ?>
<section class="alert alert-danger" id="danger-alert">
<p>captcha is missing</p>
</section>
<?php } ?>
</div>
</form>
</div>
</body>
</html>
我有一个网页，其中用户联系表单位于页面的底部。我在表单上有服务器端验证。
当服务器端验证发现错误并重新显示页面时，是否可以滚动到联系表单所在页面的底部？
答案 0 :(得分：0)
这里需要JavaScript。我们假设您的联系表格已分配了一定的ID：
<form id="contact-form">...</form>
然后，在验证失败后，您可以在JS中引用它：
<script>
document.onload = function() {
if (<?php echo !empty($captcha_missing) ? 'true' : 'false' ?>) {
window.location.hash = 'contact-form';
}
}
<script>
，您的浏览器会立即向下滚动到您的表单。
当然，您可以使用一些平滑的滚动功能，通过普通的JS或现成的库，但这将是迄今为止最简单和最简单的方法。
答案 1 :(得分：0)
在代码中</section>之后添加此行：
<script>window.scrollTo(0,document.body.scrollHeight);</script>
答案 2 :(得分：0)
我认为最简单的方法是在html表单提交中使用自动对焦功能。
<input type="text" name="name" autofocus />