Menu icon Foundation
Form Using Abide Type="Number" Arrows

Zurbquestion

<div class="row">
    <div class="small-6 columns">
		<h1>Contact Form Example</h1>
		<form action="insert.php" method="POST" data-abide>
			<div class="small-12 columns">
				<label>First name
					<input type="text" name="firstname" required pattern="[a-zA-Z]+">
				</label>
			</div>
			<div class="small-12 columns">
				<label>Last name
					<input type="text" name="lastname" required pattern="[a-zA-Z]+">
				</label>
			</div>
			<div class="small-6 columns">
				<label>Age 
					<input type="number" name="age" required>
				</label>
			</div>
			<div class="small-6 columns">
				<label>More Info About
        <select>
          <option name="info" value="Web">Web</option>
          <option name="info" value="Server">Server</option>
          <option name="info" value="Code">Code</option>
          <option name="info" value="Programming">Programming</option>
        </select>
      </label>
		</div>
		<div class="small-12 columns">
			<button type="submit">Submit</button>
		</div>
		</form>
	</div>
</div>
            

         

I am wondering where the arrow up and down features are coming from in foundation when calling type="number" on an tag. I searched the CSS and looked in the JS but am not very good with JS so very well could have missed it. I would like to work around this and not delete the feature because it could be useful on something else like quantity.

Sidenote: I tried using type="integer" instead but why does it make my input box way different than my name and other input boxes?

formabidevalidation

Zurbquestion

<div class="row">
    <div class="small-6 columns">
		<h1>Contact Form Example</h1>
		<form action="insert.php" method="POST" data-abide>
			<div class="small-12 columns">
				<label>First name
					<input type="text" name="firstname" required pattern="[a-zA-Z]+">
				</label>
			</div>
			<div class="small-12 columns">
				<label>Last name
					<input type="text" name="lastname" required pattern="[a-zA-Z]+">
				</label>
			</div>
			<div class="small-6 columns">
				<label>Age 
					<input type="number" name="age" required>
				</label>
			</div>
			<div class="small-6 columns">
				<label>More Info About
        <select>
          <option name="info" value="Web">Web</option>
          <option name="info" value="Server">Server</option>
          <option name="info" value="Code">Code</option>
          <option name="info" value="Programming">Programming</option>
        </select>
      </label>
		</div>
		<div class="small-12 columns">
			<button type="submit">Submit</button>
		</div>
		</form>
	</div>
</div>
            

         

I am wondering where the arrow up and down features are coming from in foundation when calling type="number" on an tag. I searched the CSS and looked in the JS but am not very good with JS so very well could have missed it. I would like to work around this and not delete the feature because it could be useful on something else like quantity.

Sidenote: I tried using type="integer" instead but why does it make my input box way different than my name and other input boxes?

ayezee over 5 years ago

Anyone?

reenan about 5 years ago

type="text" pattern="number"

That gave me no arrows and still validates on numbers. This leaves the type="number" intact so you can use it for quantities.

Hope this is what you were looking for and for anyone in the future.