0
私は最近html5プログラミングを開始したばかりの学生で、先生からフォームを作成するように求められました。しかし、私は現在、いくつかの問題を抱えています。問題は、フィールドセットでの私の入力フィールドがallignedされるように、私は私のコードと間違っているかを理解していない持っていることです。異なる行の入力フォームを互いに整列させる方法
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="author" content="me">
<meta name="description" content="pizza order form">
<title>Pizza order form</title>
</head>
<body>
<style>
body {
background-image: url(Grey-website-background.png);
background-repeat: repeat;
padding:200px;
}
div {
margin:auto;
width:600px;
}
#dateoforder, #email, #name, #phone, #postal code, #time {
display:inline-block;
}
form {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
color:white;
background-image: url("1494002408354-pizza-story.jpg");
border: solid 8px #7F8013;
padding:12px;
width: 700px;
/* text-align: left;
padding-bottom: 5em;
padding-left: 2em;
padding-right: 0.5em/**/
}/*margin auto sets the element to the center of the page*/
</style>
<div>
<form action="">
<h1>Pizza Order Form</h1>
Pizza Type:
<select required><!--select function allows for a html form dropdown list-->>
<option disabled value="" selected>Please select</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input type="number" min="1" max="4"/>
<br>
<fieldset name="Size">
<legend>Size:</legend>
<input type="radio" name="name" value="Small" ">Small
<!--radio buttons are circular buttons that look like options-->
<input type="radio" name="name" required value="Medium">Medium
<input type="radio" name="name" value="Large">Large<!--
By setting up the required attribute for
radio buttons,the user will have to select one of the radio
buttons before he can submit the form(regardless of which one has it.)-->
</fieldset>
<fieldset name="Crust">
<legend>Crust:</legend>
<input type="radio" name="name1" value="Thin" >Thin
<input type="radio" name="name1" required value="Thick">Thick
<input type="radio" name="name1" value="Deep Dish">Deep Dish
</fieldset>
<fieldset name="Toppings">
<legend>Toppings:</legend>
<input type="checkbox" name="Toppings" value="Mushrooms">Mushrooms
<input type="checkbox" name="Toppings" value="Sausage">Sausages
<input type="checkbox" name="Toppings" value="Olives">Olives
</fieldset>
<br>
Addons:
<select>
<option disabled value="Please select addons if required" selected>Please select addons if required</option>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
<fieldset name="Delivery details">
<legend>Delivery to:</legend>
<label for="Name">Name:</label>
<input type="text" name="name of customer" id="name">
<br><br>
<label for="Address">Address:</label>
<textarea cols="30" rows="2"></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" pattern="[0-9]{0,6}" id="postal code"><!--
{0,6} means number of characters must be from 0-6
{.6,}means minimum of 6 but no maximum -->
<br>
<label for="Phone">Phone#:</label>
<input type="text" pattern="[6,8,9][0-9]{0,8}" id="phone"><br>
<!--pattern attribute does not support input type number-->
<br>
<label for="Email address">Email:</label>
<input type="text" placeholder="Enter email addresses" id="email">
<br><br>
<label for="Date">Date:</label>
<input type="date" min="2017-11-01" max="2017-12-31" id="dateoforder">
<!--format of date in html is yyyy-mm-dd even though in chrom browser it shows dd/mm/yyyy
but for coding must use html default format-->
<label for="TOD">Time:</label>
<input type="time" min="10:00" max="22:00" step="900" value="10:00" id="time" required />
</fieldset>
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</div>
</body>
</html>
あなたが見ることができるように、フィールドセット「への配信」のフィールドセットがありません私はそれらを整列させる必要があります。私は垂直配列を読みましたが、私はそれを使用する方法を理解していません。以下は私のWebページのフォームと、私は必要な理想的なWebページのフォームテンプレートの画像は、Googleドライブフォルダへのリンクです：あなたの「完璧な」フォームを取得するための最善の策は、それを再構築することです
https://drive.google.com/open?id=0B7oJmOastgcNVWJvSHVMb0l6d00
あなたのWebページとの理想的なWebページのポイントを同じリンク – Bill
こんにちは私にドライブフォルダにリンクするために私のポストを編集しました。私にそれを指摘してくれてありがとう – nTIAO