Menu icon Foundation
Why does form size itself automatically?

I just used the code below in home.html in the default foundation for apps template. The grid-block and grid content are sized to large-12 which should allow the text field to occupy the full width of id=main but it doesn't. Form seems to have its own sizing

---
name: home
url: /
---

<div class="grid-frame">
    <div id="sidebar" class="large-3 grid-block"></div>
	<div id="main" class="large-9 grid-block">
		<form>
			<div id="personalInfo" class="large-12 grid-block">			
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
			</div>
		</form>		
	</div>
</div>
            

         

F4a1

Now If I add more fields within the form...

    <div id="main" class="large-9 grid-block">
		<form>
			<div id="personalInfo" class="large-12 grid-block">			
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
			</div>
		</form>		
	</div>
            

         

F4a2

As you can see the width grew, I can't seem to understand why adding more fields would increase the width of the text field in a form. Am I missing something? I had to add large-12 sizing to form to correct this. Am I doing something wrong below?

    	<form class="large-12">
			<div id="personalInfo" class="large-12 grid-block">			
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
			</div>
		</form>	

F4a3

formgrid-block

I just used the code below in home.html in the default foundation for apps template. The grid-block and grid content are sized to large-12 which should allow the text field to occupy the full width of id=main but it doesn't. Form seems to have its own sizing

---
name: home
url: /
---

<div class="grid-frame">
    <div id="sidebar" class="large-3 grid-block"></div>
	<div id="main" class="large-9 grid-block">
		<form>
			<div id="personalInfo" class="large-12 grid-block">			
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
			</div>
		</form>		
	</div>
</div>
            

         

F4a1

Now If I add more fields within the form...

    <div id="main" class="large-9 grid-block">
		<form>
			<div id="personalInfo" class="large-12 grid-block">			
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
			</div>
		</form>		
	</div>
            

         

F4a2

As you can see the width grew, I can't seem to understand why adding more fields would increase the width of the text field in a form. Am I missing something? I had to add large-12 sizing to form to correct this. Am I doing something wrong below?

    	<form class="large-12">
			<div id="personalInfo" class="large-12 grid-block">			
				<div class="large-12 grid-content">
					<label>
						FirstName 	
						<input type="text" placeholder="Enter First Name" required>
					</label>
				</div>
			</div>
		</form>	

F4a3