【解決方法】HTML とスタイルシートを使用して登録フォームを作成する方法

やあ

私は CSS と HTML を初めて使用します。ユーザーに詳細を入力してからデータベースに送信するか、ユーザーがリセットをクリックするとフィールドがリセットされる登録フォームを作成してみたいと思います。

これが私がこれまでに行ったことです：

HTML

<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>

また、住所フィールドが、1 つの長い行ではなく複数の行に完全な住所を入力するのに十分な大きさであることを確認したいと考えています。誰かが私もそれらを整列させるのを手伝ってくれるなら、それは素晴らしいことです。

前もって感謝します

解決策 1

これにより、正しい方向に進むはずです…

XML

<!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>