如何使用HTML和样式表创建注册表单 [英] How to create a registration form using HTML and style sheets
本文介绍了如何使用HTML和样式表创建注册表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨
我是CSS和HTML的新手，我想尝试创建一个注册表单，我让用户输入详细信息然后提交到数据库或如果用户点击重置它会重置字段。
这是我到目前为止所做的：
Hi
I am new to CSS and HTML, I want to try and create a registration form where i have a user enter details then submit to a database or if user click on reset it resets the fields.
Here is what I have done so far:
<html>
<body>
<form tag="Create Logon">
<div align="center">
Username *: <input type="username" name="username" /><br />
Password *: <input type="password" name="pwd" /><br />
Surname *: <input type="surname" name="surname" /><br />
Other Names *: <input type="other names" name="names" /><br />
Date of Birth *: <input type="date of birth" name="dob" /><br />
Email *: <input type="email" name="email" /><br />
Telephone: <input type="telephone" name="tel" /><br />
Address *: <input type="address" name="add" /><br />
Post Code *: <input type="postcode" name="ptc" /><br />
<input type="submit" value="Submit" />
</div>
</form>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
</body>
</html>
另外我想确保地址字段足够大，可以在多行而不是一行中输入完整地址。如果有人能帮助我将它们对齐那么它看起来很棒就会很棒。
提前谢谢
Also i want to make sure that the address field is big enough to enter full address in it in multiple lines rather than one long line. If if anyone could help me to align them as well so it looks nice that would be great.
Thanks in advance
推荐答案
这应该让你朝着正确的方向前进...
This should get you going in the right direction...
<!doctype html>
<html>
<head>
<style type="text/css">
body {font-family:Arial, Sans-Serif;}
#container {width:300px; margin:0 auto;}
/* Nicely lines up the labels. */
form label {display:inline-block; width:140px;}
/* You could add a class to all the input boxes instead, if you like. That would be safer, and more backwards-compatible */
form input[type="text"],
form input[type="password"],
form input[type="email"] {width:160px;}
form .line {clear:both;}
form .line.submit {text-align:right;}
</style>
</head>
<body>
<div id="container">
<form>
<h1>Create Logon</h1>
<div class="line"><label for="username">Username *: </label><input type="text" id="username" /></div>
<div class="line"><label for="pwd">Password *: </label><input type="password" id="pwd" /></div>
<!-- You may want to consider adding a "confirm" password box also -->
<div class="line"><label for="surname">Surname *: </label><input type="text" id="surname" /></div>
<div class="line"><label for="other_names">Other Names *: </label><input type="text" id="names" /></div>
<div class="line"><label for="dob">Date of Birth *: </label><input type="text" id="dob" /></div>
<div class="line"><label for="email">Email *: </label><input type="email" id="email" /></div>
<!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp -->
<div class="line"><label for="tel">Telephone: </label><input type="text" id="tel" /></div>
<div class="line"><label for="add">Address *: </label><input type="text" id="add" /></div>
<div class="line"><label for="ptc">Post Code *: </label><input type="text" id="ptc" /></div>
<div class="line submit"><input type="submit" value="Submit" /></div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
</form>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style type="text/css">
body {font-family:Arial, Sans-Serif;}
#container {width:300px; margin:0 auto;}
/* Nicely lines up the labels. */
form label {display:inline-block; width:140px;}
/* You could add a class to all the input boxes instead, if you like. That would be safer, and more backwards-compatible */
form input[type="text"],
form input[type="password"],
form input[type="email"] {width:160px;}
form .line {clear:both;}
form .line.submit {text-align:right;}
</style>
</head>
<body>
<div id="container">
<form>
<h1>Create Logon</h1>
<div class="line"><label for="username">Username *: </label><input type="text" id="username" /></div>
<div class="line"><label for="pwd">Password *: </label><input type="password" id="pwd" /></div>
<!-- You may want to consider adding a "confirm" password box also -->
<div class="line"><label for="surname">Surname *: </label><input type="text" id="surname" /></div>
<div class="line"><label for="other_names">Other Names *: </label><input type="text" id="names" /></div>
<div class="line"><label for="dob">Date of Birth *: </label><input type="text" id="dob" /></div>
<div class="line"><label for="email">Email *: </label><input type="email" id="email" /></div>
<!-- Valid input types: http://www.w3schools.com/html5/html5_form_input_types.asp -->
<div class="line"><label for="tel">Telephone: </label><input type="text" id="tel" /></div>
<div class="line"><label for="add">Address *: </label><input type="text" id="add" /></div>
<div class="line"><label for="ptc">Post Code *: </label><input type="text" id="ptc" /></div>
<div class="line submit"><input type="submit" value="Submit" /></div>
<p>Note: Please make sure your details are correct before submitting form and that all fields marked with * are completed!.</p>
</form>
</div>
</body>
</html>这篇关于如何使用HTML和样式表创建注册表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
