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

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 でハートビートの特殊効果を作成する

推薦する

AngularパイプラインPIPEの紹介と使い方

序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...

MySQLのインデックス選択と最適化の詳細な説明

目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...

Docker Compose のサイドカーモードの詳細な説明

目次Docker Composeとは要件に不適切な言語が使用されている実装Docker Compos...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

MySQL 8.0.13 のダウンロードとインストールのチュートリアル（画像とテキスト付き）

MySQL は最もよく使用されるデータベースです。詳しく知るには、コンピュータにインストールする必...

解析を実装するためにPostgreSQLデータベースを書き込むSQLスクリプト関数

この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...

MySQL innodb B+ツリーの高さを取得する方法

序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...

js で虫眼鏡効果を実現するためのアイデアとコード

この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...

Node.js のモジュール性、npm パッケージ マネージャーの説明

目次モジュール化の基本概念モジュール化とは何かモジュール分解の利点Node.js のモジュール性No...

Nodejs でモジュール fs ファイルシステムを使用する方法

目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み（推奨）約束​​の書き方...

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

Docker で MySQL 接続と設定ファイルの最大数を変更する

1. MySQLイメージを見つける ドッカーps 2. ミラーmysqlイメージを入力する dock...

Linux 仮想ホストで SourceGuardian (sg11) 暗号化コンポーネントを有効にする詳細な手順

注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...

Linux で MySQL をインストールする簡単な方法

Linux に MySQL をインストールする方法をオンラインで検索すると、多くの方法が表示されまし...