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 でフォームを中央揃えにする

MySQLを定期的にバックアップしてQiniuにアップロードする方法

Remレイアウトを使用して適応性を実現する

MySQL で MHA アーキテクチャのデプロイメントを構築する手順

MySQL XA で分散トランザクションを実装する方法

ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

MySql バッチに挿入するときにデータの重複を避ける方法

ウェブフロントエンドエンジニアにおすすめのヒント

MySQLのビューの詳細な説明

JavaScriptエンジンV8の実行プロセスの詳細な説明

HTML にネストされた div の無効なマージンに対する解決策

推薦する

VMware Workstation Pro 16 グラフィックチュートリアル (CentOS8 仮想マシンクラスタの構築)

CSS を使用してプログレスバーと順序プログレスバーを実装する例

Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)

フロントエンドのパフォーマンス最適化を学習するための準備として、HTML ページのレンダリングプロセスを理解する (続き)

MySQL スロークエリ: スロークエリを有効にする

JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

mysqlは複数の主キーを設定する操作を実装します

js の一般的でない演算子と演算子の概要

純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプルコード

vue + Electron でデスクトップアプリケーションを作成するためのサンプルコード

IE アドレスバーのアイコン表示問題を解決する 3 つの手順

JS 4つの楽しいハッカー背景効果コードを共有する

MysqlチューニングExplainツールの詳細な説明と実践的な演習（推奨）

CSS で隠し要素を実現する 7 つの興味深い方法

Web ページは何ピクセルで設計すればよいでしょうか?