HTML でフォームを中央揃えにする

以前、写真が与えられ、その写真スタイルに基づいてフォームを作成するという課題に遭遇しました。しかし、すべての機能を実装した後、フォームを中央に配置できないことがわかりました。フォームは常に左上隅で縮小され、見栄えが悪くなりました。さまざまな修正を経て、ようやくフォームを中央に配置することができました。以下は私が犯した間違いと最終結果です。（宿題のこの部分をやっていたときにCSSを学んでいなかったので、役に立たないです）

1. 新しく作られた外観

<フォーム>
			<label for="firstname">名:</label>
			<input type="text" name="firstname" id="firstname" required="required" value="" /><br />
		
			<label for="lastname">姓:</label>
			<input type="text" name="姓" id="姓" required="必須" value="" /><br />
		
			<label for="ログイン名">ログイン名:</label>
			<input type="text" name="ログイン名" required="必須" pattern="^\w{4,8}$" id="ログイン名" value="" /> (az、0-9、アンダースコアを含めることができます)<br />
		
			<label for="password">パスワード:</label>
			<input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" /> (少なくとも 6 文字を含む)<br />
		
			<label for="password2">パスワードをもう一度入力してください:</label>
			<input type="password" name="password2" required="必須" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /><br />
		
			<label for="myEmail">メールアドレス:</label>
			<input type="email" name="myEmail" id="myEmail" value="" /> (@ 文字を含める必要があります)
		</フォーム>

見た目が変なので、引き続き改善していきます。。。

2. 変更後

ここに画像の説明を挿入

さらにぎこちないように見えますが、中央揃えは実現されています。この時点では、<center> を正しく使用したかどうかはわかりません。。。

<中央>
	<フォーム>
		「」
		「」
	</フォーム>
</center>

3. テーブルレイアウトを使用した後

ここに画像の説明を挿入

これは一晩編集した後の最終結果です。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8" />
		<link rel="icon" type="text/css" href="./img/favicon.png"/>
		<タイトル></タイトル>
	</head>
	<本文>
		<中央>
		<フォームアクション="Success.html" ターゲット="_blank" メソッド="get">
			<表の境界線="0" セル間隔="" セルパディング="">
				<tr>
					<td><label for="firstname">名:</label></td>
					<td><input type="text" name="firstname" id="firstname" required="required" value="" /></td>
				</tr>
				<tr>
					<td><label for="lastname">姓:</label></td>
					<td><input type="text" name="姓" id="姓" required="必須" value="" /></td>
				</tr>
				<tr>
					<td><label for="ログイン名">ログイン名:</label></td>
					<td><input type="text" name="ログイン名" required="必須" pattern="^\w{4,8}$" id="ログイン名" value="" /> (az、0-9、アンダースコアを含めることができます)</td>
				</tr>
				<tr>
					<td><label for="password">パスワード:</label></td>
					<td><input type="password" name="password" required="required" pattern="^[a-zA-Z]\w{5,17}$" id="password" value="" /> (少なくとも 6 文字を含む)</td>
				</tr>
				<tr>
					<td><label for="password2">パスワードをもう一度入力してください:</label></td>
					<td><input type="password" name="password2" required="必須" pattern="^[a-zA-Z]\w{5,17}$" id="password2" value="" /></td>
				</tr>
				<tr>
					<td><label for="myEmail">メールアドレス:</label></td>
					<td><input type="email" name="myEmail" id="myEmail" value="" /> (@ 文字を含める必要があります)</td>
				</tr>
				<tr>
					<td><label>性別:</label></td>
					<td>
						<input type="radio" name="sex" id="" value="male" />男性<img src="./img/Male.gif" >
						<input type="radio" name="sex" id="" value="female" />女性<img src="./img/Female.gif" >
					</td>
				</tr>
				<tr>
					<td><label>アバター:</label></td>
					<td><input type="file" name="myFile" /></td>
				</tr>
				<tr>
					<td><label>趣味:</label></td>
					<td>
						<input type="checkbox" name="hobby" id="" value="スポーツ" />スポーツ <input type="checkbox" name="hobby" id="" value="チャット" />チャット <input type="checkbox" name="hobby" id="" value="ゲームをプレイ" />ゲームをプレイ </td>
				</tr>
				<tr>
					<td><label>生年月日:</label></td>
					<td>
						<input type="text" size="1" name="year"placeholder="yyyy" id="" value="" />年 <select name="month">
							<option value ="0">[月を選択]</option>
							<option value ="1">1月</option>
							<option value ="2">2月</option>
							<option value ="3">3月</option>
							<option value ="4">4月</option>
							<option value ="5">5月</option>
							<option value ="6">6月</option>
							<option value ="7">7月</option>
							<option value ="8">8月</option>
							<option value ="9">9月</option>
							<option value ="10">10月</option>
							<option value ="11">11月</option>
							<option value ="12">12月</option>
						</選択>
						<input type="text" size="1" name="day" placeholder="dd"/>日</td>
				</tr>
			</テーブル>
			<input type="image" src="img/submit.gif" value="送信" />
			<input type="image" src="img/reset.gif" onclick="reset();return false;" value="補充" />		
		</フォーム>
		</center>
	</本文>
</html>

左揃えのラベルが見栄えが悪いと思われる場合は、<td>タグにalign="right"を追加して、テキストを右揃えにすることもできます。

<td align="right"><label for="firstname">名:</label></td>

ここに画像の説明を挿入

HTML でフォームを中央に配置する方法についてはこれで終わりです。HTML フォームの中央配置の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLはフォームを通じてホテルスクリーニング機能を実現します

>>: HTML+CSS でハートビートの特殊効果を作成する

HTML でフォームを中央揃えにする

HTML コードの書き方に関する提案のまとめ

MySQLのパフォーマンスが突然低下する理由

Vueプロジェクトの支払い機能コードの詳細な説明

フロントエンド制作に関する簡単な議論: 互換性のために IE6 はまだ必要ですか?

Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル

mysqlはルートユーザーと一般ユーザーを作成し、機能を変更および削除します。

サーバー同時実行数の推定式と計算方法

Linux で iostat コマンドを使用するチュートリアル

nginxリバースプロキシを使用するときに長時間接続を維持する方法

Electronで不規則な形状の透明部分をクリックする実装

推薦する

Angular Cookie の読み取りおよび書き込み操作コード

Mysqlトランザクション処理の詳細な説明

Linuxネットワーク構成ツールの使用

ダイナミッククロックを実現するJS+CSS

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

ユーザー中心設計

ミニプログラムにより、製品属性の選択や仕様の選択が可能

ろうそくを溶かす（水滴）サンプルコードを実現する純粋な CSS

波効果を作成するための CSS のトリック

Element-uiはテーブル内のセルを直接クリックして編集します

Vueコンポーネント登録方法の解釈

JavaScript でオブジェクトのプロパティを削除する方法

DockerにRedisをインストールし、パスワードを設定して接続する方法

データベース管理に役立つ 5 つの MySQL GUI ツール

Linux で JDK 環境を構成する方法