CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title><input type="number"> - HTML: HyperText Markup Language | MDN</title><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number" hrefLang="en"/><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/es/docs/Web/HTML/Element/input/number" hrefLang="es"/><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/number" hrefLang="fr"/><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/number" hrefLang="ja"/><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/input/number" hrefLang="ru"/><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/number" hrefLang="zh"/><link rel="alternate" title="<input type="number">" href="https://developer.mozilla.org/de/docs/Web/HTML/Element/input/number" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="<input>-Elemente des Typs number werden verwendet, um dem Benutzer das Eingeben einer Zahl zu ermöglichen. Sie enthalten eine integrierte Validierung, um nicht numerische Eingaben abzulehnen."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Web/HTML/Element/input/number"/><meta property="og:title" content="<input type="number"> - HTML: HyperText Markup Language | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="<input>-Elemente des Typs number werden verwendet, um dem Benutzer das Eingeben einer Zahl zu ermöglichen. Sie enthalten eine integrierte Validierung, um nicht numerische Eingaben abzulehnen."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Web/HTML/Element/input/number"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.06414919.js"></script><link href="/static/css/main.4634a21c.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-html document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fnumber" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fnumber" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Webtechnologie für Entwickler</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/HTML" class="breadcrumb" property="item" typeof="WebPage"><span property="name">HTML</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/HTML/Element" class="breadcrumb" property="item" typeof="WebPage"><span property="name">HTML-Elemente-Referenz</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/HTML/Element/input" class="breadcrumb" property="item" typeof="WebPage"><span property="name"><input></span></a><meta property="position" content="4"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/HTML/Element/input/number" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name"><input type="number"></span></a><meta property="position" content="5"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Web/HTML/Element/input/number" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Web/HTML/Element/input/number" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/HTML/Element/input/number" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Web/HTML/Element/input/number" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/HTML/Element/input/number" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Web/HTML/Element/input/number" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#probieren_sie_es_aus">Probieren Sie es aus</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wert">Wert</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusätzliche_attribute">Zusätzliche Attribute</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_von_zahleneingaben">Verwendung von Zahleneingaben</a></li><li class="document-toc-item "><a class="document-toc-link" href="#validierung">Validierung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#barrierefreiheit">Barrierefreiheit</a></li><li class="document-toc-item "><a class="document-toc-link" href="#beispiele">Beispiele</a></li><li class="document-toc-item "><a class="document-toc-link" href="#technische_zusammenfassung">Technische Zusammenfassung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#spezifikationen">Spezifikationen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#browser-kompatibilität">Browser-Kompatibilität</a></li><li class="document-toc-item "><a class="document-toc-link" href="#siehe_auch">Siehe auch</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Web/HTML">HTML</a></li><li class="toggle"><details><summary>Einsteiger-Tutorials</summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">Ihre erste Website: Inhalte erstellen</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary>Anleitungen</summary><ol><li><a href="/de/docs/Web/HTML/Content_categories">Inhaltskategorien</a></li><li><a href="/de/docs/Glossary/Block-level_content">Block-Elemente</a></li><li><a href="/de/docs/Glossary/Inline-level_content">Inline-Elemente</a></li><li><a href="/de/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks-Modus und Standards-Modus</a></li><li><a href="/de/docs/Web/HTML/Date_and_time_formats">Datums- und Zeitformate in HTML</a></li><li><a href="/de/docs/Web/HTML/Constraint_validation">Einschränkungsvalidierung</a></li><li><a href="/de/docs/Web/HTML/Microdata">Mikrodaten</a></li><li><a href="/de/docs/Web/HTML/microformats">Mikroformate</a></li><li><a href="/de/docs/Web/HTML/Viewport_meta_tag">Viewport-Meta-Tag</a></li><li><a href="/de/docs/Web/HTML/CORS_enabled_image">Erlauben der Cross-Origin-Nutzung von Bildern und Canvas</a></li></ol></details></li><li class="section"><a href="/de/docs/Web/HTML/Reference">Referenzen</a></li><li class="toggle"><details><summary>HTML-Elemente</summary><ol><li><a href="/de/docs/Web/HTML/Element/a"><code><a></code></a></li><li><a href="/de/docs/Web/HTML/Element/abbr"><code><abbr></code></a></li><li><a href="/de/docs/Web/HTML/Element/acronym"><code>`<acronym>`</code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/address"><code><address></code></a></li><li><a href="/de/docs/Web/HTML/Element/area"><code><area></code></a></li><li><a href="/de/docs/Web/HTML/Element/article"><code><article></code></a></li><li><a href="/de/docs/Web/HTML/Element/aside"><code><aside></code></a></li><li><a href="/de/docs/Web/HTML/Element/audio"><code><audio></code></a></li><li><a href="/de/docs/Web/HTML/Element/b"><code><b></code></a></li><li><a href="/de/docs/Web/HTML/Element/base"><code><base></code></a></li><li><a href="/de/docs/Web/HTML/Element/bdi"><code><bdi></code></a></li><li><a href="/de/docs/Web/HTML/Element/bdo"><code><bdo></code></a></li><li><a href="/de/docs/Web/HTML/Element/big"><code><big></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a></li><li><a href="/de/docs/Web/HTML/Element/body"><code><body></code></a></li><li><a href="/de/docs/Web/HTML/Element/br"><code><br></code></a></li><li><a href="/de/docs/Web/HTML/Element/button"><code><button></code></a></li><li><a href="/de/docs/Web/HTML/Element/canvas"><code><canvas></code></a></li><li><a href="/de/docs/Web/HTML/Element/caption"><code><caption></code></a></li><li><a href="/de/docs/Web/HTML/Element/center"><code><center></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/cite"><code><cite></code></a></li><li><a href="/de/docs/Web/HTML/Element/code"><code><code></code></a></li><li><a href="/de/docs/Web/HTML/Element/col"><code><col></code></a></li><li><a href="/de/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a></li><li><a href="/de/docs/Web/HTML/Element/data"><code><data></code></a></li><li><a href="/de/docs/Web/HTML/Element/datalist"><code><datalist></code></a></li><li><a href="/de/docs/Web/HTML/Element/dd"><code><dd></code></a></li><li><a href="/de/docs/Web/HTML/Element/del"><code><del></code></a></li><li><a href="/de/docs/Web/HTML/Element/details"><code><details></code></a></li><li><a href="/de/docs/Web/HTML/Element/dfn"><code><dfn></code></a></li><li><a href="/de/docs/Web/HTML/Element/dialog"><code><dialog></code></a></li><li><a href="/de/docs/Web/HTML/Element/dir"><code><dir></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/div"><code><div></code></a></li><li><a href="/de/docs/Web/HTML/Element/dl"><code><dl></code></a></li><li><a href="/de/docs/Web/HTML/Element/dt"><code><dt></code></a></li><li><a href="/de/docs/Web/HTML/Element/em"><code><em></code></a></li><li><a href="/de/docs/Web/HTML/Element/embed"><code><embed></code></a></li><li><a href="/de/docs/Web/HTML/Element/fencedframe"><code><fencedframe></code></a><abbr class="icon icon-experimental" title="Experimentell. Das Verhalten könnte sich in Zukunft ändern."> <span class="visually-hidden">Experimentell</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/fieldset"><code><fieldset></code></a></li><li><a href="/de/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a></li><li><a href="/de/docs/Web/HTML/Element/figure"><code><figure></code></a></li><li><a href="/de/docs/Web/HTML/Element/font"><code><font></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/footer"><code><footer></code></a></li><li><a href="/de/docs/Web/HTML/Element/form"><code><form></code></a></li><li><a href="/de/docs/Web/HTML/Element/frame"><code><frame></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/frameset"><code><frameset></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/Heading_Elements"><code>`<h1>`–`<h6>`: Die HTML-Abschnittsüberschriftselemente</code></a></li><li><a href="/de/docs/Web/HTML/Element/head"><code><head></code></a></li><li><a href="/de/docs/Web/HTML/Element/header"><code><header></code></a></li><li><a href="/de/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a></li><li><a href="/de/docs/Web/HTML/Element/hr"><code><hr></code></a></li><li><a href="/de/docs/Web/HTML/Element/html"><code><html></code></a></li><li><a href="/de/docs/Web/HTML/Element/i"><code><i></code></a></li><li><a href="/de/docs/Web/HTML/Element/iframe"><code><iframe></code></a></li><li><a href="/de/docs/Web/HTML/Element/img"><code><img></code></a></li><li><a href="/de/docs/Web/HTML/Element/input"><code><input></code></a></li><li><a href="/de/docs/Web/HTML/Element/ins"><code><ins></code></a></li><li><a href="/de/docs/Web/HTML/Element/kbd"><code><kbd></code></a></li><li><a href="/de/docs/Web/HTML/Element/label"><code><label></code></a></li><li><a href="/de/docs/Web/HTML/Element/legend"><code><legend></code></a></li><li><a href="/de/docs/Web/HTML/Element/li"><code><li></code></a></li><li><a href="/de/docs/Web/HTML/Element/link"><code><link></code></a></li><li><a href="/de/docs/Web/HTML/Element/main"><code><main></code></a></li><li><a href="/de/docs/Web/HTML/Element/map"><code><map></code></a></li><li><a href="/de/docs/Web/HTML/Element/mark"><code><mark></code></a></li><li><a href="/de/docs/Web/HTML/Element/marquee"><code><marquee></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/menu"><code><menu></code></a></li><li><a href="/de/docs/Web/HTML/Element/meta"><code><meta></code></a></li><li><a href="/de/docs/Web/HTML/Element/meter"><code><meter></code></a></li><li><a href="/de/docs/Web/HTML/Element/nav"><code><nav></code></a></li><li><a href="/de/docs/Web/HTML/Element/nobr"><code><nobr></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/noembed"><code><noembed></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/noframes"><code><noframes></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/noscript"><code><noscript></code></a></li><li><a href="/de/docs/Web/HTML/Element/object"><code><object></code></a></li><li><a href="/de/docs/Web/HTML/Element/ol"><code><ol></code></a></li><li><a href="/de/docs/Web/HTML/Element/optgroup"><code><optgroup></code></a></li><li><a href="/de/docs/Web/HTML/Element/option"><code><option></code></a></li><li><a href="/de/docs/Web/HTML/Element/output"><code><output></code></a></li><li><a href="/de/docs/Web/HTML/Element/p"><code><p></code></a></li><li><a href="/de/docs/Web/HTML/Element/param"><code><param></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/picture"><code><picture></code></a></li><li><a href="/de/docs/Web/HTML/Element/plaintext"><code><plaintext></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/pre"><code><pre></code></a></li><li><a href="/de/docs/Web/HTML/Element/progress"><code><progress></code></a></li><li><a href="/de/docs/Web/HTML/Element/q"><code><q></code></a></li><li><a href="/de/docs/Web/HTML/Element/rb"><code><rb></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/rp"><code><rp></code></a></li><li><a href="/de/docs/Web/HTML/Element/rt"><code><rt></code></a></li><li><a href="/de/docs/Web/HTML/Element/rtc"><code><rtc></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/ruby"><code><ruby></code></a></li><li><a href="/de/docs/Web/HTML/Element/s"><code><s></code></a></li><li><a href="/de/docs/Web/HTML/Element/samp"><code><samp></code></a></li><li><a href="/de/docs/Web/HTML/Element/script"><code><script></code></a></li><li><a href="/de/docs/Web/HTML/Element/search"><code><search></code></a></li><li><a href="/de/docs/Web/HTML/Element/section"><code><section></code></a></li><li><a href="/de/docs/Web/HTML/Element/select"><code><select></code></a></li><li><a href="/de/docs/Web/HTML/Element/slot"><code><slot></code></a></li><li><a href="/de/docs/Web/HTML/Element/small"><code><small></code></a></li><li><a href="/de/docs/Web/HTML/Element/source"><code><source></code></a></li><li><a href="/de/docs/Web/HTML/Element/span"><code><span></code></a></li><li><a href="/de/docs/Web/HTML/Element/strike"><code><strike></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/strong"><code><strong></code></a></li><li><a href="/de/docs/Web/HTML/Element/style"><code><style></code></a></li><li><a href="/de/docs/Web/HTML/Element/sub"><code><sub></code></a></li><li><a href="/de/docs/Web/HTML/Element/summary"><code><summary></code></a></li><li><a href="/de/docs/Web/HTML/Element/sup"><code><sup></code></a></li><li><a href="/de/docs/Web/HTML/Element/table"><code><table></code></a></li><li><a href="/de/docs/Web/HTML/Element/tbody"><code><tbody></code></a></li><li><a href="/de/docs/Web/HTML/Element/td"><code><td></code></a></li><li><a href="/de/docs/Web/HTML/Element/template"><code><template></code></a></li><li><a href="/de/docs/Web/HTML/Element/textarea"><code><textarea></code></a></li><li><a href="/de/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a></li><li><a href="/de/docs/Web/HTML/Element/th"><code><th></code></a></li><li><a href="/de/docs/Web/HTML/Element/thead"><code><thead></code></a></li><li><a href="/de/docs/Web/HTML/Element/time"><code><time></code></a></li><li><a href="/de/docs/Web/HTML/Element/title"><code><title></code></a></li><li><a href="/de/docs/Web/HTML/Element/tr"><code><tr></code></a></li><li><a href="/de/docs/Web/HTML/Element/track"><code><track></code></a></li><li><a href="/de/docs/Web/HTML/Element/tt"><code><tt></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/HTML/Element/u"><code><u></code></a></li><li><a href="/de/docs/Web/HTML/Element/ul"><code>`<ul>`: Das ungeordnete Listen-Element</code></a></li><li><a href="/de/docs/Web/HTML/Element/var"><code><var></code></a></li><li><a href="/de/docs/Web/HTML/Element/video"><code><video></code></a></li><li><a href="/de/docs/Web/HTML/Element/wbr"><code><wbr></code></a></li><li><a href="/de/docs/Web/HTML/Element/xmp"><code><xmp></code></a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>Globale Attribute</summary><ol><li><a href="/de/docs/Web/HTML/Global_attributes/accesskey"><code>accesskey</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/anchor"><code>anchor</code></a><abbr class="icon icon-experimental" title="Experimentell. Das Verhalten könnte sich in Zukunft ändern."> <span class="visually-hidden">Experimentell</span> </abbr><abbr class="icon icon-nonstandard" title="Nicht standardisiert. Überprüfen Sie vor der Verwendung die Browser-Kompatibilität."> <span class="visually-hidden">Nicht standardisiert</span> </abbr></li><li><a href="/de/docs/Web/HTML/Global_attributes/autocapitalize"><code>autocapitalize</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/autocorrect"><code>autocorrect</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/autofocus"><code>autofocus</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/class"><code>class</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/data-*"><code>data-*</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/draggable"><code>draggable</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/enterkeyhint"><code>enterkeyhint</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/exportparts"><code>exportparts</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/id"><code>id</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/inert"><code>inert</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/is"><code>is</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/itemid"><code>itemid</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/itemref"><code>itemref</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/itemscope"><code>itemscope</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/itemtype"><code>itemtype</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/lang"><code>lang</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/nonce"><code>nonce</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/part"><code>part</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/popover"><code>popover</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/slot"><code>slot</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/style"><code>style</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/title"><code>title</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/translate"><code>translate</code></a></li><li><a href="/de/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy"><code>virtualkeyboardpolicy</code></a><abbr class="icon icon-experimental" title="Experimentell. Das Verhalten könnte sich in Zukunft ändern."> <span class="visually-hidden">Experimentell</span> </abbr></li><li><a href="/de/docs/Web/HTML/Global_attributes/writingsuggestions"><code>writingsuggestions</code></a></li></ol></details></li><li class="toggle"><details><summary>Attribute</summary><ol><li><a href="/de/docs/Web/HTML/Attributes/accept">accept</a></li><li><a href="/de/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></li><li><a href="/de/docs/Web/HTML/Attributes/capture">capture</a></li><li><a href="/de/docs/Web/HTML/Attributes/crossorigin">crossorigin</a></li><li><a href="/de/docs/Web/HTML/Attributes/dirname">dirname</a></li><li><a href="/de/docs/Web/HTML/Attributes/disabled">disabled</a></li><li><a href="/de/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></li><li><a href="/de/docs/Web/HTML/Attributes/for">for</a></li><li><a href="/de/docs/Web/HTML/Attributes/max">max</a></li><li><a href="/de/docs/Web/HTML/Attributes/maxlength">maxlength</a></li><li><a href="/de/docs/Web/HTML/Attributes/min">min</a></li><li><a href="/de/docs/Web/HTML/Attributes/minlength">minlength</a></li><li><a href="/de/docs/Web/HTML/Attributes/multiple">multiple</a></li><li><a href="/de/docs/Web/HTML/Attributes/pattern">pattern</a></li><li><a href="/de/docs/Web/HTML/Attributes/placeholder">placeholder</a></li><li><a href="/de/docs/Web/HTML/Attributes/readonly">readonly</a></li><li><a href="/de/docs/Web/HTML/Attributes/rel">rel</a></li><li><a href="/de/docs/Web/HTML/Attributes/required">required</a></li><li><a href="/de/docs/Web/HTML/Attributes/size">size</a></li><li><a href="/de/docs/Web/HTML/Attributes/step">step</a></li></ol></details></li><li class="toggle"><details open=""><summary><code><input></code>-Typen</summary><ol><li><a href="/de/docs/Web/HTML/Element/input/button"><code><input type="button"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/checkbox"><code><input type="checkbox"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/color"><code><input type="color"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/date"><code><input type="date"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/datetime-local"><code><input type="datetime-local"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/email"><code><input type="email"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/file"><code><input type="file"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/hidden"><code><input type="hidden"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/image"><code><input type="image"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/month"><code><input type="month"></code></a></li><li><em><a href="/de/docs/Web/HTML/Element/input/number" aria-current="page"><code><input type="number"></code></a></em></li><li><a href="/de/docs/Web/HTML/Element/input/password"><code><input type="password"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/radio"><code><input type="radio"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/range"><code><input type="range"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/reset"><code><input type="reset"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/search"><code><input type="search"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/tel"><code><input type="tel"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/text"><code><input type="text"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/time"><code><input type="time"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/url"><code><input type="url"></code></a></li><li><a href="/de/docs/Web/HTML/Element/input/week"><code><input type="week"></code></a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#probieren_sie_es_aus">Probieren Sie es aus</a></li><li class="document-toc-item "><a class="document-toc-link" href="#wert">Wert</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusätzliche_attribute">Zusätzliche Attribute</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendung_von_zahleneingaben">Verwendung von Zahleneingaben</a></li><li class="document-toc-item "><a class="document-toc-link" href="#validierung">Validierung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#barrierefreiheit">Barrierefreiheit</a></li><li class="document-toc-item "><a class="document-toc-link" href="#beispiele">Beispiele</a></li><li class="document-toc-item "><a class="document-toc-link" href="#technische_zusammenfassung">Technische Zusammenfassung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#spezifikationen">Spezifikationen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#browser-kompatibilität">Browser-Kompatibilität</a></li><li class="document-toc-item "><a class="document-toc-link" href="#siehe_auch">Siehe auch</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1><input type="number"></h1><details class="baseline-indicator high"><summary><span class="indicator" role="img" aria-label="Baseline Check"></span><div class="status-title">Baseline <span class="not-bold">Widely available</span></div><div class="browsers"><span class="engine" title="Supported in Chrome and Edge"><span class="browser chrome supported" role="img" aria-label="Chrome check"></span><span class="browser edge supported" role="img" aria-label="Edge check"></span></span><span class="engine" title="Supported in Firefox"><span class="browser firefox supported" role="img" aria-label="Firefox check"></span></span><span class="engine" title="Supported in Safari"><span class="browser safari supported" role="img" aria-label="Safari check"></span></span></div><span class="icon icon-chevron "></span></summary><div class="extra"><p>This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.</p><ul><li><a href="/de/docs/Glossary/Baseline/Compatibility" data-glean="baseline_link_learn_more" target="_blank" class="learn-more">Learn more</a></li><li><a href="#browser-kompatibilität" data-glean="baseline_link_bcd_table">See full compatibility</a></li><li><a href="https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback?page=%2Fde%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fnumber&level=high" data-glean="baseline_link_feedback" class="feedback-link" target="_blank" rel="noreferrer">Report feedback</a></li></ul></div></details></header><div class="section-content"><p><a href="/de/docs/Web/HTML/Element/input"><code><input></code></a>-Elemente des Typs <strong><code>number</code></strong> werden verwendet, um dem Benutzer das Eingeben einer Zahl zu ermöglichen. Sie enthalten eine integrierte Validierung, um nicht numerische Eingaben abzulehnen.</p> <p>Der Browser kann optional Schrittpfeile bereitstellen, um dem Benutzer zu ermöglichen, den Wert mit der Maus zu erhöhen oder zu verringern oder durch Antippen mit einem Finger.</p></div><section aria-labelledby="probieren_sie_es_aus"><h2 id="probieren_sie_es_aus"><a href="#probieren_sie_es_aus">Probieren Sie es aus</a></h2><div class="section-content"><interactive-example name="HTML Demo: &lt;input type=&quot;number&quot;&gt;" height="tabbed-shorter"></interactive-example> <div class="code-example"><pre class="brush: html interactive-example notranslate"><code><label for="tentacles">Number of tentacles (10-100):</label> <input type="number" id="tentacles" name="tentacles" min="10" max="100" /> </code></pre></div> <div class="code-example"><pre class="brush: css interactive-example notranslate"><code>label { display: block; font: 1rem "Fira Sans", sans-serif; } input, label { margin: 0.4rem 0; } </code></pre></div> <p>In Browsern, die Eingaben vom Typ <code>number</code> nicht unterstützen, fällt eine <code>number</code>-Eingabe auf den Typ <code>text</code> zurück.</p></div></section><section aria-labelledby="wert"><h2 id="wert"><a href="#wert">Wert</a></h2><div class="section-content"><p>Eine Zahl, die den in die Eingabe eingegebenen Wert darstellt. Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine Zahl innerhalb des <a href="/de/docs/Web/HTML/Element/input#value"><code>value</code></a>-Attributs einschließen, wie folgt:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input id="number" type="number" value="42" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="value" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="zusätzliche_attribute"><h2 id="zusätzliche_attribute"><a href="#zusätzliche_attribute">Zusätzliche Attribute</a></h2><div class="section-content"><p>Zusätzlich zu den häufig von allen <a href="/de/docs/Web/HTML/Element/input"><code><input></code></a>-Typen unterstützten Attributen unterstützen Eingaben vom Typ <code>number</code> diese Attribute.</p></div></section><section aria-labelledby="list"><h3 id="list"><a href="#list"><code>list</code></a></h3><div class="section-content"><p>Der Wert des list-Attributs ist die <a href="/de/docs/Web/API/Element/id"><code>id</code></a> eines <a href="/de/docs/Web/HTML/Element/datalist"><code><datalist></code></a>-Elements im selben Dokument. Das <a href="/de/docs/Web/HTML/Element/datalist"><code><datalist></code></a> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte aus der Liste, die nicht mit dem <a href="/de/docs/Web/HTML/Element/input#type"><code>type</code></a> kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.</p></div></section><section aria-labelledby="max"><h3 id="max"><a href="#max"><code>max</code></a></h3><div class="section-content"><p>Der maximale Wert, der für diese Eingabe akzeptiert wird. Wenn der in das Element eingegebene <a href="/de/docs/Web/HTML/Element/input#value"><code>value</code></a> diesen Wert überschreitet, schlägt die <a href="/de/docs/Web/HTML/Constraint_validation">Einschränkungsvalidierung</a> fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Maximalwert.</p> <p>Dieser Wert muss größer oder gleich dem Wert des min-Attributs sein.</p></div></section><section aria-labelledby="min"><h3 id="min"><a href="#min"><code>min</code></a></h3><div class="section-content"><p>Der minimale Wert, der für diese Eingabe akzeptiert wird. Wenn der <a href="/de/docs/Web/HTML/Element/input#value"><code>value</code></a> des Elements kleiner als dieser ist, schlägt die <a href="/de/docs/Web/HTML/Constraint_validation">Einschränkungsvalidierung</a> fehl. Wenn ein Wert für min angegeben ist, der keine gültige Zahl ist, hat die Eingabe keinen Minimalwert.</p> <p>Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein.</p></div></section><section aria-labelledby="placeholder"><h3 id="placeholder"><a href="#placeholder"><code>placeholder</code></a></h3><div class="section-content"><p>Das <code>placeholder</code>-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, statt einer erklärenden Nachricht. Der Text <em>darf keine</em> Wagenrückläufe oder Zeilenumbrüche enthalten.</p> <p>Wenn der Inhalt der Steuerung eine Richtung (<a href="/de/docs/Glossary/LTR">LTR</a> oder <a href="/de/docs/Glossary/RTL">RTL</a>) hat, jedoch der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" class="external" target="_blank">How to use Unicode controls for bidi text</a> für weitere Informationen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Vermeiden Sie nach Möglichkeit die Verwendung des <code>placeholder</code>-Attributs. Es ist nicht so semantisch nützlich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe <a href="/de/docs/Web/HTML/Element/input#labels"><code><input></code>-Label</a> für weitere Informationen.</p> </div></div></section><section aria-labelledby="readonly"><h3 id="readonly"><a href="#readonly"><code>readonly</code></a></h3><div class="section-content"><p>Ein boolesches Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein <code>value</code> kann jedoch weiterhin von JavaScript-Code direkt durch Festlegen der <a href="/de/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code>-Eigenschaft geändert werden.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Da ein schreibgeschütztes Feld keinen Wert haben kann, hat <code>required</code> keine Auswirkung auf Eingaben, bei denen das <code>readonly</code>-Attribut ebenfalls angegeben ist.</p> </div></div></section><section aria-labelledby="step"><h3 id="step"><a href="#step"><code>step</code></a></h3><div class="section-content"><p>Das <code>step</code>-Attribut ist eine Zahl, die die Granularität angibt, an der sich der Wert orientieren muss, oder der spezielle Wert <code>any</code>, der unten beschrieben wird. Nur Werte, die dem Basiswert für das Inkrementieren (<a href="#min"><code>min</code></a>, falls angegeben, <a href="/de/docs/Web/HTML/Element/input#value"><code>value</code></a> ansonsten und einem geeigneten Standardwert, wenn keiner dieser Werte angegeben ist) entsprechen, sind gültig.</p> <p>Ein Stringwert von <code>any</code> bedeutet, dass kein Inkrement impliziert wird und jeder Wert zulässig ist (unter Ausschluss anderer Einschränkungen wie <a href="#min"><code>min</code></a> und <a href="#max"><code>max</code></a>).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn die vom Benutzer eingegebenen Daten nicht der Step-Konfiguration entsprechen, kann die <a href="/de/docs/Glossary/User_agent">Benutzer-Agent</a> die Rundung auf den nächstgelegenen gültigen Wert vornehmen, wobei Zahlen in positiver Richtung bevorzugt werden, wenn zwei gleich nahe Optionen bestehen.</p> </div> <p>Der Standard-Schritwert für <code>number</code>-Eingaben ist <code>1</code>, sodass nur ganze Zahlen eingegeben werden können, <em>es sei denn</em>, die Grundlage für das Inkrementieren ist keine ganze Zahl.</p></div></section><section aria-labelledby="verwendung_von_zahleneingaben"><h2 id="verwendung_von_zahleneingaben"><a href="#verwendung_von_zahleneingaben">Verwendung von Zahleneingaben</a></h2><div class="section-content"><p>Der <code>number</code>-Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn eine Spinbutton-Inkrementierung und -Dinkremente hilfreich sind für die Benutzererfahrung. Der <code>number</code>-Eingabetyp ist nicht geeignet für Werte, die nur aus Zahlen bestehen, aber nicht im eigentlichen Sinne eine Zahl sind, wie Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht numerische Eingaben sollten Sie einen anderen Eingabetyp in Betracht ziehen, wie <a href="/de/docs/Web/HTML/Element/input/tel"><code><input type="tel"></code></a> oder einen anderen <a href="/de/docs/Web/HTML/Element/input"><code><input></code></a>-Typ mit dem <a href="/de/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a>-Attribut:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input type="text" inputmode="numeric" pattern="\d*" /> </code></pre></div> <p><code><input type="number"></code>-Elemente können Ihre Arbeit bei der Erstellung der Benutzeroberfläche und Logik für die Eingabe von Zahlen in ein Formular vereinfachen. Wenn Sie eine Zahleingabe mit dem richtigen <code>type</code>-Wert festlegen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, sowie normalerweise eine Reihe von Auf- und Ab-Buttons, um den Wert zu erhöhen oder zu verringern.</p> <div class="notecard warning"> <p><strong>Warnung:</strong> Logischerweise sollte es nicht möglich sein, andere Zeichen als Zahlen in eine Zahleingabe einzugeben. Einige Browser erlauben ungültige Zeichen, andere nicht; siehe <a href="https://bugzil.la/1398528" class="external" target="_blank">Firefox-Bug 1398528</a>.</p> </div> <div class="notecard note"> <p><strong>Hinweis:</strong> Ein Benutzer kann mit Ihrem HTML im Hintergrund experimentieren, daher <em>darf</em> Ihre Website keine clientseitige Validierung für Sicherheitszwecke verwenden. Sie <em>müssen</em> auf der Serverseite jede Transaktion überprüfen, bei der der bereitgestellte Wert Sicherheitsimplikationen jeglicher Art haben könnte.</p> </div> <p>Mobile Browser helfen weiter bei der Benutzererfahrung, indem sie eine spezielle Tastatur anzeigen, die besser für die Eingabe von Zahlen geeignet ist, wenn der Benutzer versucht, einen Wert einzugeben.</p></div></section><section aria-labelledby="eine_grundlegende_zahleingabe"><h3 id="eine_grundlegende_zahleingabe"><a href="#eine_grundlegende_zahleingabe">Eine grundlegende Zahleingabe</a></h3><div class="section-content"><p>In ihrer grundlegendsten Form kann eine Zahleingabe so implementiert werden:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><label for="ticketNum">Number of tickets you would like to buy:</label> <input id="ticketNum" type="number" name="ticketNum" value="0" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="A basic number input sample" id="frame_a_basic_number_input" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="a_basic_number_input" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Eine Zahleingabe wird als gültig angesehen, wenn sie leer ist und wenn eine einzelne Zahl eingegeben wird, ist jedoch ansonsten ungültig. Wenn das <a href="/de/docs/Web/HTML/Element/input#required"><code>required</code></a>-Attribut verwendet wird, wird die Eingabe nicht mehr als gültig betrachtet, wenn sie leer ist.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Jede Zahl ist ein akzeptabler Wert, solange sie eine <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number" class="external" target="_blank">gültige Gleitkommanummer</a> ist (das heißt, nicht <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> oder <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>).</p> </div></div></section><section aria-labelledby="platzhalter"><h3 id="platzhalter"><a href="#platzhalter">Platzhalter</a></h3><div class="section-content"><p>Manchmal ist es hilfreich, einen kontextuellen Hinweis darauf zu geben, in welcher Form die Eingabedaten erfolgen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <a href="/de/docs/Web/HTML/Element/input"><code><input></code></a> bietet. Hier kommen <strong>Platzhalter</strong> ins Spiel. Ein Platzhalter ist ein Wert, der am häufigsten verwendet wird, um einen Hinweis auf das Format der Eingabe zu geben <code>value</code>. Er wird innerhalb des Eingabefelds angezeigt, wenn der <code>value</code> des Elements <code>""</code> ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter erneut.</p> <p>Hier haben wir eine <code>number</code>-Eingabe mit dem Platzhalter "Mehrfache von 10". Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, während Sie die Inhalte des Eingabefelds manipulieren.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input type="number" placeholder="Multiple of 10" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Placeholders sample" id="frame_placeholders" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="placeholders" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="kontrolle_der_schrittgröße"><h3 id="kontrolle_der_schrittgröße"><a href="#kontrolle_der_schrittgröße">Kontrolle der Schrittgröße</a></h3><div class="section-content"><p>Standardmäßig erhöhen und verringern die bereitgestellten Auf- und Ab-Pfeile den Wert um 1. Sie können dies ändern, indem Sie ein <a href="/de/docs/Web/HTML/Element/input#step"><code>step</code></a>-Attribut angeben, dessen Wert eine Zahl ist, die die Schrittweite angibt. Unser obiges Beispiel enthält einen Platzhalter, der besagt, dass der Wert ein Mehrfaches von 10 sein sollte, daher ergibt es Sinn, einen <code>step</code>-Wert von <code>10</code> zu setzen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input type="number" placeholder="multiple of 10" step="10" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Controlling step size sample" id="frame_controlling_step_size" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="controlling_step_size" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>In diesem Beispiel werden die Auf- und Ab-Pfeile den Wert um jeweils 10 ändern, nicht um 1. Sie können weiterhin manuell eine Zahl eingeben, die kein Mehrfaches von 10 ist, aber sie wird als ungültig angesehen.</p></div></section><section aria-labelledby="festlegung_minimaler_und_maximaler_werte"><h3 id="festlegung_minimaler_und_maximaler_werte"><a href="#festlegung_minimaler_und_maximaler_werte">Festlegung minimaler und maximaler Werte</a></h3><div class="section-content"><p>Sie können die <a href="/de/docs/Web/HTML/Element/input#min"><code>min</code></a>- und <a href="/de/docs/Web/HTML/Element/input#max"><code>max</code></a>-Attribute verwenden, um einen minimalen und maximalen Wert festzulegen, den das Feld haben kann. Zum Beispiel geben wir unserem Beispiel ein Minimum von <code>0</code> und ein Maximum von <code>100</code>:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input type="number" placeholder="multiple of 10" step="10" min="0" max="100" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Specifying minimum and maximum values sample" id="frame_specifying_minimum_and_maximum_values" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="specifying_minimum_and_maximum_values" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>In dieser aktualisierten Version sollten Sie feststellen, dass die Auf- und Ab-Schritt-Buttons Sie nicht unter 0 oder über 100 gehen lassen. Sie können dennoch manuell eine Zahl außerhalb dieser Grenzen eingeben, aber sie wird als ungültig angesehen.</p></div></section><section aria-labelledby="dezimalwerte_zulassen"><h3 id="dezimalwerte_zulassen"><a href="#dezimalwerte_zulassen">Dezimalwerte zulassen</a></h3><div class="section-content"><p>Ein Problem mit Zahleneingaben ist, dass ihre Schrittgröße standardmäßig 1 beträgt. Wenn Sie versuchen, eine Zahl mit einem Dezimalpunkt einzugeben (wie "1.0"), wird sie als ungültig angesehen. Wenn Sie einen Wert eingeben möchten, der Dezimalstellen erfordert, müssen Sie dies im <code>step</code>-Wert widerspiegeln (z. B. <code>step="0.01"</code>, um Dezimalzahlen auf zwei Dezimalstellen zuzulassen). Hier ist ein einfaches Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input type="number" placeholder="1.0" step="0.01" min="0" max="10" /> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Allowing decimal values sample" id="frame_allowing_decimal_values" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="allowing_decimal_values" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Sehen Sie, dass dieses Beispiel jeden Wert zwischen <code>0.0</code> und <code>10.0</code> zulässt, mit Dezimalstellen bis zu zwei Stellen. Zum Beispiel ist "9.52" gültig, aber "9.521" ist nicht.</p> <p>Wenn Sie beliebige Dezimalwerte zulassen möchten, können Sie den <code>step</code>-Wert auf <code>"any"</code> setzen.</p></div></section><section aria-labelledby="eingabegröße_kontrollieren"><h3 id="eingabegröße_kontrollieren"><a href="#eingabegröße_kontrollieren">Eingabegröße kontrollieren</a></h3><div class="section-content"><p><a href="/de/docs/Web/HTML/Element/input"><code><input></code></a>-Elemente des Typs <code>number</code> unterstützen keine Formgrößenattribute wie <a href="/de/docs/Web/HTML/Element/input#size"><code>size</code></a>. Sie müssen auf <a href="/de/docs/Web/CSS">CSS</a> zurückgreifen, um die Größe dieser Steuerelemente zu ändern.</p> <p>Um zum Beispiel die Breite der Eingabe nur so breit zu machen, dass eine dreistellige Zahl eingegeben werden kann, können wir unser HTML ändern, um ein <a href="/de/docs/Web/HTML/Global_attributes/id"><code>id</code></a> einzuschließen und unseren Platzhalter zu verkürzen, da das Feld zu schmal für den Text sein wird, den wir bisher verwendet haben:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input type="number" placeholder="x10" step="10" min="0" max="100" id="number" /> </code></pre></div> <p>Dann fügen wir etwas CSS hinzu, um die Breite des Elements mit dem <code>id</code>-Selektor <code>#number</code> zu verengen:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>#number { width: 3em; } </code></pre></div> <p>Das Ergebnis sieht so aus:</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Controlling input size sample" id="frame_controlling_input_size" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="controlling_input_size" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="vorgeschlagene_werte_anbieten"><h3 id="vorgeschlagene_werte_anbieten"><a href="#vorgeschlagene_werte_anbieten">Vorgeschlagene Werte anbieten</a></h3><div class="section-content"><p>Sie können eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das <a href="/de/docs/Web/HTML/Element/input#list"><code>list</code></a>-Attribut angeben, das als Wert die <a href="/de/docs/Web/HTML/Global_attributes/id"><code>id</code></a> eines <a href="/de/docs/Web/HTML/Element/datalist"><code><datalist></code></a> enthält, das wiederum ein <a href="/de/docs/Web/HTML/Element/option"><code><option></code></a>-Element pro vorgeschlagenem Wert enthält. Jeder <code>option</code>-Wert ist der entsprechende vorgeschlagene Wert für das Zahlen-Eingabefeld.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" /> <span class="validity"></span> <datalist id="defaultNumbers"> <option value="10045678"></option> <option value="103421"></option> <option value="11111111"></option> <option value="12345678"></option> <option value="12999922"></option> </datalist> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Offering suggested values sample" id="frame_offering_suggested_values" width="600" height="60" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="offering_suggested_values" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div></div></section><section aria-labelledby="validierung"><h2 id="validierung"><a href="#validierung">Validierung</a></h2><div class="section-content"><p>Wir haben bereits einige Validierungsfunktionen von <code>number</code>-Eingaben erwähnt, aber lassen Sie uns diese noch einmal zusammenfassen:</p> <ul> <li><code><input type="number"></code>-Elemente machen automatisch jede Eingabe ungültig, die keine Zahl ist (oder leer, es sei denn, <code>required</code> ist angegeben).</li> <li>Sie können das <a href="/de/docs/Web/HTML/Element/input#required"><code>required</code></a>-Attribut verwenden, um eine leere Eingabe ungültig zu machen. (Mit anderen Worten, die Eingabe <em>muss</em> ausgefüllt werden.)</li> <li>Sie können das <a href="/de/docs/Web/HTML/Element/input#step"><code>step</code></a>-Attribut verwenden, um gültige Werte auf eine bestimmte Schrittzahl zu beschränken (z. B. Vielfache von 10).</li> <li>Sie können die <a href="/de/docs/Web/HTML/Element/input#min"><code>min</code></a>- und <a href="/de/docs/Web/HTML/Element/input#max"><code>max</code></a>-Attribute verwenden, um gültige Werte auf untere und obere Grenzen zu beschränken.</li> </ul> <p>Das folgende Beispiel zeigt alle oben genannten Funktionen und verwendet auch etwas CSS, um gültige und ungültige Symbole anzuzeigen, abhängig vom <code>input</code>-Wert:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <div> <label for="balloons">Number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required /> <span class="validity"></span> </div> <div> <input type="submit" /> </div> </form> </code></pre></div> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="110" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="validation" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Versuchen Sie, das Formular mit verschiedenen ungültigen Werten einzugeben – z. B. keinem Wert; einem Wert unter 0 oder über 100; einem Wert, der kein Vielfaches von 10 ist; oder einem nicht numerischen Wert – und sehen Sie, wie die Fehlermeldungen des Browsers sich mit den verschiedenen unterscheiden.</p> <p>Das auf dieses Beispiel angewendete CSS sieht folgendermaßen aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div { margin-bottom: 10px; } input:invalid + span::after { content: "✖"; padding-left: 5px; } input:valid + span::after { content: "✓"; padding-left: 5px; } </code></pre></div> <p>Hier verwenden wir die <a href="/de/docs/Web/CSS/:invalid"><code>:invalid</code></a> und <a href="/de/docs/Web/CSS/:valid"><code>:valid</code></a> Pseudo-Klassen, um ein entsprechendes gültiges oder ungültiges Icon als generierten Inhalt auf dem angrenzenden <a href="/de/docs/Web/HTML/Element/span"><code><span></code></a>-Element anzuzeigen, als visuelle Anzeige der Gültigkeit.</p> <p>Wir setzen es auf ein separates <code><span></code>-Element für zusätzliche Flexibilität. Einige Browser zeigen generierten Inhalt nicht sehr effektiv auf einigen Arten von Formulareingaben an. (Lesen Sie zum Beispiel den Abschnitt zur <a href="/de/docs/Web/HTML/Element/input/date#validation"><code><input type="date"></code>-Validierung</a>.)</p> <div class="notecard warning"> <p><strong>Warnung:</strong> Die HTML-Formularvalidierung ist <em>kein</em> Ersatz für serverseitige Skripte, die sicherstellen, dass die eingegebenen Daten im richtigen Format sind!</p> <p>Es ist viel zu einfach, jemandem Anpassungen am HTML vorzunehmen, die es ihm erlauben, die Validierung zu umgehen oder ganz zu entfernen. Es ist auch möglich, dass jemand Ihr HTML umgeht und die Daten direkt an Ihren Server sendet.</p> <p>Wenn Ihr serverseitiger Code es versäumt, die empfangenen Daten zu validieren, könnte es zu einer Katastrophe kommen, wenn falsch formatierte Daten übermittelt werden (oder Daten, die zu groß sind, den falschen Typ haben, usw.).</p> </div></div></section><section aria-labelledby="mustervalidierung"><h3 id="mustervalidierung"><a href="#mustervalidierung">Mustervalidierung</a></h3><div class="section-content"><p><code><input type="number"></code>-Elemente unterstützen nicht die Verwendung des <a href="/de/docs/Web/HTML/Element/input#pattern"><code>pattern</code></a>-Attributs, um eingegebene Werte einem bestimmten Regex-Muster anzupassen.</p> <p>Der Grund dafür ist, dass Zahleneingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie können die minimale und maximale Anzahl gültiger Ziffern mit den <a href="/de/docs/Web/HTML/Element/input#min"><code>min</code></a>- und <a href="/de/docs/Web/HTML/Element/input#max"><code>max</code></a>-Attributen beschränken (wie oben erklärt).</p></div></section><section aria-labelledby="barrierefreiheit"><h2 id="barrierefreiheit"><a href="#barrierefreiheit">Barrierefreiheit</a></h2><div class="section-content"><p>Die implizite <a href="/de/docs/Web/Accessibility/ARIA/Roles">Rolle</a> für das <code><input type="number"></code>-Element ist <a href="/de/docs/Web/Accessibility/ARIA/Roles/spinbutton_role"><code>spinbutton</code></a>. Wenn der Spinbutton keine wichtige Funktion für Ihre Formularkontrolle ist, sollten Sie überlegen, <code>type="number"</code> nicht zu verwenden. Stattdessen verwenden Sie <a href="/de/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode="numeric"</code></a> zusammen mit einem <a href="/de/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>-Attribut, das die Zeichen auf Zahlen und zugehörige Zeichen beschränkt. Mit <code><input type="number"></code> besteht das Risiko, dass Benutzer versehentlich eine Zahl inkrementieren, wenn sie versuchen, etwas anderes zu tun. Zusätzlich gibt es kein explizites Feedback darüber, was der Benutzer falsch macht, wenn er versucht, etwas anderes als eine Zahl einzugeben.</p> <p>Überlegen Sie auch, das <a href="/de/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a>-Attribut zu verwenden, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlerwahrscheinlichkeit auszufüllen. Zum Beispiel ist das automatische Ausfüllen eines Postleitzahlenfelds mit <code>autocomplete="postal-code"</code> möglich.</p></div></section><section aria-labelledby="beispiele"><h2 id="beispiele"><a href="#beispiele">Beispiele</a></h2><div class="section-content"><p>Wir haben bereits besprochen, dass das Inkrement standardmäßig <code>1</code> ist und Sie das <a href="/de/docs/Web/HTML/Element/input#step"><code>step</code></a>-Attribut verwenden können, um Dezimalzahleingaben zuzulassen. Lassen Sie uns einen genaueren Blick darauf werfen.</p> <p>Im folgenden Beispiel befindet sich ein Formular zur Eingabe der Körpergröße des Benutzers. Es akzeptiert standardmäßig eine Eingabe in Metern, Sie können jedoch auf die entsprechende Taste klicken, um das Formular so zu ändern, dass es Fuß und Zoll akzeptiert. Die Eingabe für die Höhe in Metern akzeptiert Dezimalstellen bis zu zwei Stellen.</p> <div class="code-example"><div class="example-header"></div><iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="150" src="about:blank" data-live-path="/de/docs/Web/HTML/Element/input/number/" data-live-id="examples" sandbox="allow-same-origin allow-scripts" loading="lazy"></iframe></div> <p>Das HTML sieht so aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><form> <div class="metersInputGroup"> <label for="meters">Enter your height — meters:</label> <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required /> <span class="validity"></span> </div> <div class="feetInputGroup" style="display: none;"> <span>Enter your height — </span> <label for="feet">feet:</label> <input id="feet" type="number" name="feet" min="0" step="1" /> <span class="validity"></span> <label for="inches">inches:</label> <input id="inches" type="number" name="inches" min="0" max="11" step="1" /> <span class="validity"></span> </div> <div> <input type="button" class="meters" value="Enter height in feet and inches" /> </div> <div> <input type="submit" value="Submit form" /> </div> </form> </code></pre></div> <p>Sie werden sehen, dass wir viele der Attribute verwenden, die wir im Artikel bereits behandelt haben. Da wir einen Meterwert in Zentimetern akzeptieren möchten, haben wir den <code>step</code>-Wert auf <code>0.01</code> gesetzt, sodass Werte wie <em>1.78</em> nicht als ungültig angesehen werden. Wir haben auch einen Platzhalter für diese Eingabe bereitgestellt.</p> <p>Wir haben die Fuß- und Zoll-Eingaben zunächst mit <code>style="display: none;"</code> ausgeblendet, sodass Meter die Standard-Eingabemöglichkeit ist.</p> <p>Nun zum CSS. Dies sieht sehr ähnlich aus wie das Validierungsstyling, das wir zuvor gesehen haben; nichts Bemerkenswertes hier.</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; } </code></pre></div> <p>Und schließlich das JavaScript:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const metersInputGroup = document.querySelector(".metersInputGroup"); const feetInputGroup = document.querySelector(".feetInputGroup"); const metersInput = document.querySelector("#meters"); const feetInput = document.querySelector("#feet"); const inchesInput = document.querySelector("#inches"); const switchBtn = document.querySelector('input[type="button"]'); switchBtn.addEventListener("click", () => { if (switchBtn.getAttribute("class") === "meters") { switchBtn.setAttribute("class", "feet"); switchBtn.value = "Enter height in meters"; metersInputGroup.style.display = "none"; feetInputGroup.style.display = "block"; feetInput.setAttribute("required", ""); inchesInput.setAttribute("required", ""); metersInput.removeAttribute("required"); metersInput.value = ""; } else { switchBtn.setAttribute("class", "meters"); switchBtn.value = "Enter height in feet and inches"; metersInputGroup.style.display = "block"; feetInputGroup.style.display = "none"; feetInput.removeAttribute("required"); inchesInput.removeAttribute("required"); metersInput.setAttribute("required", ""); feetInput.value = ""; inchesInput.value = ""; } }); </code></pre></div> <p>Nachdem wir einige Variablen deklariert haben, wird ein Event-Listener zum <code>button</code> hinzugefügt, um den Umschaltmechanismus zu kontrollieren. Dies beinhaltet das Ändern der <code>class</code> und <a href="/de/docs/Web/HTML/Element/label"><code><label></code></a> des Buttons sowie das Aktualisieren der Anzeige der beiden Eingabesätze, wenn der Button gedrückt wird.</p> <p>(Beachten Sie, dass wir hier keinen hin- und hergehenden Umrechnungsmechanismus zwischen Metern und Fuß/Zoll implementieren, was eine echte Webanwendung wahrscheinlich tun würde.)</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn der Benutzer den Knopf drückt, entfernen wir das <code>required</code>-Attribut von den Eingaben, die wir ausblenden, und leeren die <code>value</code>-Attribute. Dadurch kann das Formular abgeschickt werden, wenn beide Eingabesätze nicht ausgefüllt sind. Es stellt auch sicher, dass das Formular keine Daten absendet, die der Benutzer nicht beabsichtigt hat.</p> <p>Wenn Sie dies nicht tun würden, müssten Sie sowohl Fuß/Zoll <strong>und</strong> Meter ausfüllen, um das Formular abzuschicken!</p> </div></div></section><section aria-labelledby="technische_zusammenfassung"><h2 id="technische_zusammenfassung"><a href="#technische_zusammenfassung">Technische Zusammenfassung</a></h2><div class="section-content"><figure class="table-container"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Wert</a></strong></td> <td>Eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>, die eine Zahl darstellt, oder leer</td> </tr> <tr> <td><strong>Ereignisse</strong></td> <td> [`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event) </td> </tr> <tr> <td><strong>Unterstützte gemeinsame Attribute</strong></td> <td> <a href="/de/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>, <a href="/de/docs/Web/HTML/Element/input#list"><code>list</code></a>, <a href="/de/docs/Web/HTML/Element/input#placeholder"><code>placeholder</code></a>, <a href="/de/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a> </td> </tr> <tr> <td><strong>IDL-Attribute</strong></td> <td> <a href="/de/docs/Web/HTML/Element/input#list"><code>list</code></a>, <a href="/de/docs/Web/HTML/Element/input#value"><code>value</code></a>, <code>valueAsNumber</code> </td> </tr> <tr> <td><strong>DOM-Schnittstelle</strong></td> <td><p>[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)</p></td> </tr> <tr> <td><strong>Methode</strong></td> <td> [`select()`](/de/docs/Web/API/HTMLInputElement/select), [`stepUp()`](/de/docs/Web/API/HTMLInputElement/stepUp), [`stepDown()`](/de/docs/Web/API/HTMLInputElement/stepDown) </td> </tr> <tr> <td><strong>Implizite ARIA-Rolle</strong></td> <td> <code><a href="/de/docs/Web/Accessibility/ARIA/Roles/spinbutton_role">spinbutton</a></code> </td> </tr> </tbody> </table></figure></div></section><h2 id="spezifikationen"><a href="#spezifikationen">Spezifikationen</a></h2><table class="standard-table"><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)">HTML <br/><small># number-state-(type=number)</small></a></td></tr></tbody></table><h2 id="browser-kompatibilität"><a href="#browser-kompatibilität">Browser-Kompatibilität</a></h2><p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p><section aria-labelledby="siehe_auch"><h2 id="siehe_auch"><a href="#siehe_auch">Siehe auch</a></h2><div class="section-content"><ul> <li><a href="/de/docs/Learn_web_development/Extensions/Forms">HTML Formularleitfaden</a></li> <li><a href="/de/docs/Web/HTML/Element/input"><code><input></code></a></li> <li><a href="/de/docs/Web/HTML/Element/input/tel"><code><input type="tel"></code></a></li> <li><a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/" class="external" target="_blank">Artikel: Warum Gov.UK den Eingabetyp für Zahlen geändert hat</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/web/html/element/input/number/index.md?plain=1" title="Folder: de/web/html/element/input/number (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fnumber&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Fweb%2Fhtml%2Felement%2Finput%2Fnumber%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FWeb%2FHTML%2FElement%2Finput%2Fnumber%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Fweb%2Fhtml%2Felement%2Finput%2Fnumber%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F1c835a0234aec5e4dbbcf0bc219f2ae7ac393018%0A*+Document+last+modified%3A+2025-02-26T00%3A19%3A22.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Web/HTML/Element/input/number","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p><a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a>-Elemente des Typs <strong><code>number</code></strong> werden verwendet, um dem Benutzer das Eingeben einer Zahl zu ermöglichen. Sie enthalten eine integrierte Validierung, um nicht numerische Eingaben abzulehnen.</p>\n<p>Der Browser kann optional Schrittpfeile bereitstellen, um dem Benutzer zu ermöglichen, den Wert mit der Maus zu erhöhen oder zu verringern oder durch Antippen mit einem Finger.</p>"}},{"type":"prose","value":{"id":"probieren_sie_es_aus","title":"Probieren Sie es aus","isH3":false,"content":"<interactive-example name=\"HTML Demo: &lt;input type=&quot;number&quot;&gt;\" height=\"tabbed-shorter\"></interactive-example>\n<div class=\"code-example\"><pre class=\"brush: html interactive-example notranslate\"><code><label for=\"tentacles\">Number of tentacles (10-100):</label>\n\n<input type=\"number\" id=\"tentacles\" name=\"tentacles\" min=\"10\" max=\"100\" />\n</code></pre></div>\n<div class=\"code-example\"><pre class=\"brush: css interactive-example notranslate\"><code>label {\n display: block;\n font:\n 1rem \"Fira Sans\",\n sans-serif;\n}\n\ninput,\nlabel {\n margin: 0.4rem 0;\n}\n</code></pre></div>\n<p>In Browsern, die Eingaben vom Typ <code>number</code> nicht unterstützen, fällt eine <code>number</code>-Eingabe auf den Typ <code>text</code> zurück.</p>"}},{"type":"prose","value":{"id":"wert","title":"Wert","isH3":false,"content":"<p>Eine Zahl, die den in die Eingabe eingegebenen Wert darstellt. Sie können einen Standardwert für die Eingabe festlegen, indem Sie eine Zahl innerhalb des <a href=\"/de/docs/Web/HTML/Element/input#value\"><code>value</code></a>-Attributs einschließen, wie folgt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input id=\"number\" type=\"number\" value=\"42\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Value sample\" id=\"frame_value\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"value\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"zusätzliche_attribute","title":"Zusätzliche Attribute","isH3":false,"content":"<p>Zusätzlich zu den häufig von allen <a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a>-Typen unterstützten Attributen unterstützen Eingaben vom Typ <code>number</code> diese Attribute.</p>"}},{"type":"prose","value":{"id":"list","title":"<code>list</code>","isH3":true,"content":"<p>Der Wert des list-Attributs ist die <a href=\"/de/docs/Web/API/Element/id\"><code>id</code></a> eines <a href=\"/de/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>-Elements im selben Dokument. Das <a href=\"/de/docs/Web/HTML/Element/datalist\"><code><datalist></code></a> bietet eine Liste vordefinierter Werte an, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte aus der Liste, die nicht mit dem <a href=\"/de/docs/Web/HTML/Element/input#type\"><code>type</code></a> kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.</p>"}},{"type":"prose","value":{"id":"max","title":"<code>max</code>","isH3":true,"content":"<p>Der maximale Wert, der für diese Eingabe akzeptiert wird. Wenn der in das Element eingegebene <a href=\"/de/docs/Web/HTML/Element/input#value\"><code>value</code></a> diesen Wert überschreitet, schlägt die <a href=\"/de/docs/Web/HTML/Constraint_validation\">Einschränkungsvalidierung</a> fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Maximalwert.</p>\n<p>Dieser Wert muss größer oder gleich dem Wert des min-Attributs sein.</p>"}},{"type":"prose","value":{"id":"min","title":"<code>min</code>","isH3":true,"content":"<p>Der minimale Wert, der für diese Eingabe akzeptiert wird. Wenn der <a href=\"/de/docs/Web/HTML/Element/input#value\"><code>value</code></a> des Elements kleiner als dieser ist, schlägt die <a href=\"/de/docs/Web/HTML/Constraint_validation\">Einschränkungsvalidierung</a> fehl. Wenn ein Wert für min angegeben ist, der keine gültige Zahl ist, hat die Eingabe keinen Minimalwert.</p>\n<p>Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein.</p>"}},{"type":"prose","value":{"id":"placeholder","title":"<code>placeholder</code>","isH3":true,"content":"<p>Das <code>placeholder</code>-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, statt einer erklärenden Nachricht. Der Text <em>darf keine</em> Wagenrückläufe oder Zeilenumbrüche enthalten.</p>\n<p>Wenn der Inhalt der Steuerung eine Richtung (<a href=\"/de/docs/Glossary/LTR\">LTR</a> oder <a href=\"/de/docs/Glossary/RTL\">RTL</a>) hat, jedoch der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe <a href=\"https://www.w3.org/International/questions/qa-bidi-unicode-controls\" class=\"external\" target=\"_blank\">How to use Unicode controls for bidi text</a> für weitere Informationen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nVermeiden Sie nach Möglichkeit die Verwendung des <code>placeholder</code>-Attributs. Es ist nicht so semantisch nützlich wie andere Möglichkeiten, Ihr Formular zu erklären, und kann unerwartete technische Probleme mit Ihrem Inhalt verursachen. Siehe <a href=\"/de/docs/Web/HTML/Element/input#labels\"><code><input></code>-Label</a> für weitere Informationen.</p>\n</div>"}},{"type":"prose","value":{"id":"readonly","title":"<code>readonly</code>","isH3":true,"content":"<p>Ein boolesches Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein <code>value</code> kann jedoch weiterhin von JavaScript-Code direkt durch Festlegen der <a href=\"/de/docs/Web/API/HTMLInputElement\"><code>HTMLInputElement</code></a> <code>value</code>-Eigenschaft geändert werden.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDa ein schreibgeschütztes Feld keinen Wert haben kann, hat <code>required</code> keine Auswirkung auf Eingaben, bei denen das <code>readonly</code>-Attribut ebenfalls angegeben ist.</p>\n</div>"}},{"type":"prose","value":{"id":"step","title":"<code>step</code>","isH3":true,"content":"<p>Das <code>step</code>-Attribut ist eine Zahl, die die Granularität angibt, an der sich der Wert orientieren muss, oder der spezielle Wert <code>any</code>, der unten beschrieben wird. Nur Werte, die dem Basiswert für das Inkrementieren (<a href=\"#min\"><code>min</code></a>, falls angegeben, <a href=\"/de/docs/Web/HTML/Element/input#value\"><code>value</code></a> ansonsten und einem geeigneten Standardwert, wenn keiner dieser Werte angegeben ist) entsprechen, sind gültig.</p>\n<p>Ein Stringwert von <code>any</code> bedeutet, dass kein Inkrement impliziert wird und jeder Wert zulässig ist (unter Ausschluss anderer Einschränkungen wie <a href=\"#min\"><code>min</code></a> und <a href=\"#max\"><code>max</code></a>).</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn die vom Benutzer eingegebenen Daten nicht der Step-Konfiguration entsprechen, kann die <a href=\"/de/docs/Glossary/User_agent\">Benutzer-Agent</a> die Rundung auf den nächstgelegenen gültigen Wert vornehmen, wobei Zahlen in positiver Richtung bevorzugt werden, wenn zwei gleich nahe Optionen bestehen.</p>\n</div>\n<p>Der Standard-Schritwert für <code>number</code>-Eingaben ist <code>1</code>, sodass nur ganze Zahlen eingegeben werden können, <em>es sei denn</em>, die Grundlage für das Inkrementieren ist keine ganze Zahl.</p>"}},{"type":"prose","value":{"id":"verwendung_von_zahleneingaben","title":"Verwendung von Zahleneingaben","isH3":false,"content":"<p>Der <code>number</code>-Eingabetyp sollte nur für inkrementelle Zahlen verwendet werden, insbesondere wenn eine Spinbutton-Inkrementierung und -Dinkremente hilfreich sind für die Benutzererfahrung. Der <code>number</code>-Eingabetyp ist nicht geeignet für Werte, die nur aus Zahlen bestehen, aber nicht im eigentlichen Sinne eine Zahl sind, wie Postleitzahlen in vielen Ländern oder Kreditkartennummern. Für nicht numerische Eingaben sollten Sie einen anderen Eingabetyp in Betracht ziehen, wie <a href=\"/de/docs/Web/HTML/Element/input/tel\"><code><input type=\"tel\"></code></a> oder einen anderen <a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a>-Typ mit dem <a href=\"/de/docs/Web/HTML/Global_attributes/inputmode\"><code>inputmode</code></a>-Attribut:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input type=\"text\" inputmode=\"numeric\" pattern=\"\\d*\" />\n</code></pre></div>\n<p><code><input type=\"number\"></code>-Elemente können Ihre Arbeit bei der Erstellung der Benutzeroberfläche und Logik für die Eingabe von Zahlen in ein Formular vereinfachen. Wenn Sie eine Zahleingabe mit dem richtigen <code>type</code>-Wert festlegen, erhalten Sie eine automatische Validierung, dass der eingegebene Text eine Zahl ist, sowie normalerweise eine Reihe von Auf- und Ab-Buttons, um den Wert zu erhöhen oder zu verringern.</p>\n<div class=\"notecard warning\">\n<p><strong>Warnung:</strong>\nLogischerweise sollte es nicht möglich sein, andere Zeichen als Zahlen in eine Zahleingabe einzugeben. Einige Browser erlauben ungültige Zeichen, andere nicht; siehe <a href=\"https://bugzil.la/1398528\" class=\"external\" target=\"_blank\">Firefox-Bug 1398528</a>.</p>\n</div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEin Benutzer kann mit Ihrem HTML im Hintergrund experimentieren, daher <em>darf</em> Ihre Website keine clientseitige Validierung für Sicherheitszwecke verwenden. Sie <em>müssen</em> auf der Serverseite jede Transaktion überprüfen, bei der der bereitgestellte Wert Sicherheitsimplikationen jeglicher Art haben könnte.</p>\n</div>\n<p>Mobile Browser helfen weiter bei der Benutzererfahrung, indem sie eine spezielle Tastatur anzeigen, die besser für die Eingabe von Zahlen geeignet ist, wenn der Benutzer versucht, einen Wert einzugeben.</p>"}},{"type":"prose","value":{"id":"eine_grundlegende_zahleingabe","title":"Eine grundlegende Zahleingabe","isH3":true,"content":"<p>In ihrer grundlegendsten Form kann eine Zahleingabe so implementiert werden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><label for=\"ticketNum\">Number of tickets you would like to buy:</label>\n<input id=\"ticketNum\" type=\"number\" name=\"ticketNum\" value=\"0\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"A basic number input sample\" id=\"frame_a_basic_number_input\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"a_basic_number_input\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Eine Zahleingabe wird als gültig angesehen, wenn sie leer ist und wenn eine einzelne Zahl eingegeben wird, ist jedoch ansonsten ungültig. Wenn das <a href=\"/de/docs/Web/HTML/Element/input#required\"><code>required</code></a>-Attribut verwendet wird, wird die Eingabe nicht mehr als gültig betrachtet, wenn sie leer ist.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nJede Zahl ist ein akzeptabler Wert, solange sie eine <a href=\"https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number\" class=\"external\" target=\"_blank\">gültige Gleitkommanummer</a> ist (das heißt, nicht <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/NaN\">NaN</a> oder <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Infinity\">Infinity</a>).</p>\n</div>"}},{"type":"prose","value":{"id":"platzhalter","title":"Platzhalter","isH3":true,"content":"<p>Manchmal ist es hilfreich, einen kontextuellen Hinweis darauf zu geben, in welcher Form die Eingabedaten erfolgen sollten. Dies kann besonders wichtig sein, wenn das Seitendesign keine beschreibenden Labels für jedes <a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a> bietet. Hier kommen <strong>Platzhalter</strong> ins Spiel. Ein Platzhalter ist ein Wert, der am häufigsten verwendet wird, um einen Hinweis auf das Format der Eingabe zu geben <code>value</code>. Er wird innerhalb des Eingabefelds angezeigt, wenn der <code>value</code> des Elements <code>\"\"</code> ist. Sobald Daten in das Feld eingegeben werden, verschwindet der Platzhalter; wenn das Feld geleert wird, erscheint der Platzhalter erneut.</p>\n<p>Hier haben wir eine <code>number</code>-Eingabe mit dem Platzhalter \"Mehrfache von 10\". Beachten Sie, wie der Platzhalter verschwindet und wieder erscheint, während Sie die Inhalte des Eingabefelds manipulieren.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input type=\"number\" placeholder=\"Multiple of 10\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Placeholders sample\" id=\"frame_placeholders\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"placeholders\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"kontrolle_der_schrittgröße","title":"Kontrolle der Schrittgröße","isH3":true,"content":"<p>Standardmäßig erhöhen und verringern die bereitgestellten Auf- und Ab-Pfeile den Wert um 1. Sie können dies ändern, indem Sie ein <a href=\"/de/docs/Web/HTML/Element/input#step\"><code>step</code></a>-Attribut angeben, dessen Wert eine Zahl ist, die die Schrittweite angibt. Unser obiges Beispiel enthält einen Platzhalter, der besagt, dass der Wert ein Mehrfaches von 10 sein sollte, daher ergibt es Sinn, einen <code>step</code>-Wert von <code>10</code> zu setzen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input type=\"number\" placeholder=\"multiple of 10\" step=\"10\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Controlling step size sample\" id=\"frame_controlling_step_size\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"controlling_step_size\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>In diesem Beispiel werden die Auf- und Ab-Pfeile den Wert um jeweils 10 ändern, nicht um 1. Sie können weiterhin manuell eine Zahl eingeben, die kein Mehrfaches von 10 ist, aber sie wird als ungültig angesehen.</p>"}},{"type":"prose","value":{"id":"festlegung_minimaler_und_maximaler_werte","title":"Festlegung minimaler und maximaler Werte","isH3":true,"content":"<p>Sie können die <a href=\"/de/docs/Web/HTML/Element/input#min\"><code>min</code></a>- und <a href=\"/de/docs/Web/HTML/Element/input#max\"><code>max</code></a>-Attribute verwenden, um einen minimalen und maximalen Wert festzulegen, den das Feld haben kann. Zum Beispiel geben wir unserem Beispiel ein Minimum von <code>0</code> und ein Maximum von <code>100</code>:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input type=\"number\" placeholder=\"multiple of 10\" step=\"10\" min=\"0\" max=\"100\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Specifying minimum and maximum values sample\" id=\"frame_specifying_minimum_and_maximum_values\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"specifying_minimum_and_maximum_values\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>In dieser aktualisierten Version sollten Sie feststellen, dass die Auf- und Ab-Schritt-Buttons Sie nicht unter 0 oder über 100 gehen lassen. Sie können dennoch manuell eine Zahl außerhalb dieser Grenzen eingeben, aber sie wird als ungültig angesehen.</p>"}},{"type":"prose","value":{"id":"dezimalwerte_zulassen","title":"Dezimalwerte zulassen","isH3":true,"content":"<p>Ein Problem mit Zahleneingaben ist, dass ihre Schrittgröße standardmäßig 1 beträgt. Wenn Sie versuchen, eine Zahl mit einem Dezimalpunkt einzugeben (wie \"1.0\"), wird sie als ungültig angesehen. Wenn Sie einen Wert eingeben möchten, der Dezimalstellen erfordert, müssen Sie dies im <code>step</code>-Wert widerspiegeln (z. B. <code>step=\"0.01\"</code>, um Dezimalzahlen auf zwei Dezimalstellen zuzulassen). Hier ist ein einfaches Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input type=\"number\" placeholder=\"1.0\" step=\"0.01\" min=\"0\" max=\"10\" />\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Allowing decimal values sample\" id=\"frame_allowing_decimal_values\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"allowing_decimal_values\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Sehen Sie, dass dieses Beispiel jeden Wert zwischen <code>0.0</code> und <code>10.0</code> zulässt, mit Dezimalstellen bis zu zwei Stellen. Zum Beispiel ist \"9.52\" gültig, aber \"9.521\" ist nicht.</p>\n<p>Wenn Sie beliebige Dezimalwerte zulassen möchten, können Sie den <code>step</code>-Wert auf <code>\"any\"</code> setzen.</p>"}},{"type":"prose","value":{"id":"eingabegröße_kontrollieren","title":"Eingabegröße kontrollieren","isH3":true,"content":"<p><a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a>-Elemente des Typs <code>number</code> unterstützen keine Formgrößenattribute wie <a href=\"/de/docs/Web/HTML/Element/input#size\"><code>size</code></a>. Sie müssen auf <a href=\"/de/docs/Web/CSS\">CSS</a> zurückgreifen, um die Größe dieser Steuerelemente zu ändern.</p>\n<p>Um zum Beispiel die Breite der Eingabe nur so breit zu machen, dass eine dreistellige Zahl eingegeben werden kann, können wir unser HTML ändern, um ein <a href=\"/de/docs/Web/HTML/Global_attributes/id\"><code>id</code></a> einzuschließen und unseren Platzhalter zu verkürzen, da das Feld zu schmal für den Text sein wird, den wir bisher verwendet haben:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input\n type=\"number\"\n placeholder=\"x10\"\n step=\"10\"\n min=\"0\"\n max=\"100\"\n id=\"number\" />\n</code></pre></div>\n<p>Dann fügen wir etwas CSS hinzu, um die Breite des Elements mit dem <code>id</code>-Selektor <code>#number</code> zu verengen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>#number {\n width: 3em;\n}\n</code></pre></div>\n<p>Das Ergebnis sieht so aus:</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Controlling input size sample\" id=\"frame_controlling_input_size\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"controlling_input_size\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"vorgeschlagene_werte_anbieten","title":"Vorgeschlagene Werte anbieten","isH3":true,"content":"<p>Sie können eine Liste von Standardoptionen bereitstellen, aus denen der Benutzer auswählen kann, indem Sie das <a href=\"/de/docs/Web/HTML/Element/input#list\"><code>list</code></a>-Attribut angeben, das als Wert die <a href=\"/de/docs/Web/HTML/Global_attributes/id\"><code>id</code></a> eines <a href=\"/de/docs/Web/HTML/Element/datalist\"><code><datalist></code></a> enthält, das wiederum ein <a href=\"/de/docs/Web/HTML/Element/option\"><code><option></code></a>-Element pro vorgeschlagenem Wert enthält. Jeder <code>option</code>-Wert ist der entsprechende vorgeschlagene Wert für das Zahlen-Eingabefeld.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><input id=\"ticketNum\" type=\"number\" name=\"ticketNum\" list=\"defaultNumbers\" />\n<span class=\"validity\"></span>\n\n<datalist id=\"defaultNumbers\">\n <option value=\"10045678\"></option>\n <option value=\"103421\"></option>\n <option value=\"11111111\"></option>\n <option value=\"12345678\"></option>\n <option value=\"12999922\"></option>\n</datalist>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Offering suggested values sample\" id=\"frame_offering_suggested_values\" width=\"600\" height=\"60\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"offering_suggested_values\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>"}},{"type":"prose","value":{"id":"validierung","title":"Validierung","isH3":false,"content":"<p>Wir haben bereits einige Validierungsfunktionen von <code>number</code>-Eingaben erwähnt, aber lassen Sie uns diese noch einmal zusammenfassen:</p>\n<ul>\n<li><code><input type=\"number\"></code>-Elemente machen automatisch jede Eingabe ungültig, die keine Zahl ist (oder leer, es sei denn, <code>required</code> ist angegeben).</li>\n<li>Sie können das <a href=\"/de/docs/Web/HTML/Element/input#required\"><code>required</code></a>-Attribut verwenden, um eine leere Eingabe ungültig zu machen. (Mit anderen Worten, die Eingabe <em>muss</em> ausgefüllt werden.)</li>\n<li>Sie können das <a href=\"/de/docs/Web/HTML/Element/input#step\"><code>step</code></a>-Attribut verwenden, um gültige Werte auf eine bestimmte Schrittzahl zu beschränken (z. B. Vielfache von 10).</li>\n<li>Sie können die <a href=\"/de/docs/Web/HTML/Element/input#min\"><code>min</code></a>- und <a href=\"/de/docs/Web/HTML/Element/input#max\"><code>max</code></a>-Attribute verwenden, um gültige Werte auf untere und obere Grenzen zu beschränken.</li>\n</ul>\n<p>Das folgende Beispiel zeigt alle oben genannten Funktionen und verwendet auch etwas CSS, um gültige und ungültige Symbole anzuzeigen, abhängig vom <code>input</code>-Wert:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <div>\n <label for=\"balloons\">Number of balloons to order (multiples of 10):</label>\n <input\n id=\"balloons\"\n type=\"number\"\n name=\"balloons\"\n step=\"10\"\n min=\"0\"\n max=\"100\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input type=\"submit\" />\n </div>\n</form>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Validation sample\" id=\"frame_validation\" width=\"600\" height=\"110\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"validation\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Versuchen Sie, das Formular mit verschiedenen ungültigen Werten einzugeben – z. B. keinem Wert; einem Wert unter 0 oder über 100; einem Wert, der kein Vielfaches von 10 ist; oder einem nicht numerischen Wert – und sehen Sie, wie die Fehlermeldungen des Browsers sich mit den verschiedenen unterscheiden.</p>\n<p>Das auf dieses Beispiel angewendete CSS sieht folgendermaßen aus:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div {\n margin-bottom: 10px;\n}\n\ninput:invalid + span::after {\n content: \"✖\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n content: \"✓\";\n padding-left: 5px;\n}\n</code></pre></div>\n<p>Hier verwenden wir die <a href=\"/de/docs/Web/CSS/:invalid\"><code>:invalid</code></a> und <a href=\"/de/docs/Web/CSS/:valid\"><code>:valid</code></a> Pseudo-Klassen, um ein entsprechendes gültiges oder ungültiges Icon als generierten Inhalt auf dem angrenzenden <a href=\"/de/docs/Web/HTML/Element/span\"><code><span></code></a>-Element anzuzeigen, als visuelle Anzeige der Gültigkeit.</p>\n<p>Wir setzen es auf ein separates <code><span></code>-Element für zusätzliche Flexibilität. Einige Browser zeigen generierten Inhalt nicht sehr effektiv auf einigen Arten von Formulareingaben an. (Lesen Sie zum Beispiel den Abschnitt zur <a href=\"/de/docs/Web/HTML/Element/input/date#validation\"><code><input type=\"date\"></code>-Validierung</a>.)</p>\n<div class=\"notecard warning\">\n<p><strong>Warnung:</strong>\nDie HTML-Formularvalidierung ist <em>kein</em> Ersatz für serverseitige Skripte, die sicherstellen, dass die eingegebenen Daten im richtigen Format sind!</p>\n<p>Es ist viel zu einfach, jemandem Anpassungen am HTML vorzunehmen, die es ihm erlauben, die Validierung zu umgehen oder ganz zu entfernen. Es ist auch möglich, dass jemand Ihr HTML umgeht und die Daten direkt an Ihren Server sendet.</p>\n<p>Wenn Ihr serverseitiger Code es versäumt, die empfangenen Daten zu validieren, könnte es zu einer Katastrophe kommen, wenn falsch formatierte Daten übermittelt werden (oder Daten, die zu groß sind, den falschen Typ haben, usw.).</p>\n</div>"}},{"type":"prose","value":{"id":"mustervalidierung","title":"Mustervalidierung","isH3":true,"content":"<p><code><input type=\"number\"></code>-Elemente unterstützen nicht die Verwendung des <a href=\"/de/docs/Web/HTML/Element/input#pattern\"><code>pattern</code></a>-Attributs, um eingegebene Werte einem bestimmten Regex-Muster anzupassen.</p>\n<p>Der Grund dafür ist, dass Zahleneingaben nicht gültig sind, wenn sie etwas anderes als Zahlen enthalten, und Sie können die minimale und maximale Anzahl gültiger Ziffern mit den <a href=\"/de/docs/Web/HTML/Element/input#min\"><code>min</code></a>- und <a href=\"/de/docs/Web/HTML/Element/input#max\"><code>max</code></a>-Attributen beschränken (wie oben erklärt).</p>"}},{"type":"prose","value":{"id":"barrierefreiheit","title":"Barrierefreiheit","isH3":false,"content":"<p>Die implizite <a href=\"/de/docs/Web/Accessibility/ARIA/Roles\">Rolle</a> für das <code><input type=\"number\"></code>-Element ist <a href=\"/de/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\"><code>spinbutton</code></a>. Wenn der Spinbutton keine wichtige Funktion für Ihre Formularkontrolle ist, sollten Sie überlegen, <code>type=\"number\"</code> nicht zu verwenden. Stattdessen verwenden Sie <a href=\"/de/docs/Web/HTML/Global_attributes/inputmode\"><code>inputmode=\"numeric\"</code></a> zusammen mit einem <a href=\"/de/docs/Web/HTML/Attributes/pattern\"><code>pattern</code></a>-Attribut, das die Zeichen auf Zahlen und zugehörige Zeichen beschränkt. Mit <code><input type=\"number\"></code> besteht das Risiko, dass Benutzer versehentlich eine Zahl inkrementieren, wenn sie versuchen, etwas anderes zu tun. Zusätzlich gibt es kein explizites Feedback darüber, was der Benutzer falsch macht, wenn er versucht, etwas anderes als eine Zahl einzugeben.</p>\n<p>Überlegen Sie auch, das <a href=\"/de/docs/Web/HTML/Attributes/autocomplete\"><code>autocomplete</code></a>-Attribut zu verwenden, um Benutzern zu helfen, Formulare schneller und mit weniger Fehlerwahrscheinlichkeit auszufüllen. Zum Beispiel ist das automatische Ausfüllen eines Postleitzahlenfelds mit <code>autocomplete=\"postal-code\"</code> möglich.</p>"}},{"type":"prose","value":{"id":"beispiele","title":"Beispiele","isH3":false,"content":"<p>Wir haben bereits besprochen, dass das Inkrement standardmäßig <code>1</code> ist und Sie das <a href=\"/de/docs/Web/HTML/Element/input#step\"><code>step</code></a>-Attribut verwenden können, um Dezimalzahleingaben zuzulassen. Lassen Sie uns einen genaueren Blick darauf werfen.</p>\n<p>Im folgenden Beispiel befindet sich ein Formular zur Eingabe der Körpergröße des Benutzers. Es akzeptiert standardmäßig eine Eingabe in Metern, Sie können jedoch auf die entsprechende Taste klicken, um das Formular so zu ändern, dass es Fuß und Zoll akzeptiert. Die Eingabe für die Höhe in Metern akzeptiert Dezimalstellen bis zu zwei Stellen.</p>\n<div class=\"code-example\"><div class=\"example-header\"></div><iframe class=\"sample-code-frame\" title=\"Examples sample\" id=\"frame_examples\" width=\"600\" height=\"150\" src=\"about:blank\" data-live-path=\"/de/docs/Web/HTML/Element/input/number/\" data-live-id=\"examples\" sandbox=\"allow-same-origin allow-scripts\" loading=\"lazy\"></iframe></div>\n<p>Das HTML sieht so aus:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><form>\n <div class=\"metersInputGroup\">\n <label for=\"meters\">Enter your height — meters:</label>\n <input\n id=\"meters\"\n type=\"number\"\n name=\"meters\"\n step=\"0.01\"\n min=\"0\"\n placeholder=\"e.g. 1.78\"\n required />\n <span class=\"validity\"></span>\n </div>\n <div class=\"feetInputGroup\" style=\"display: none;\">\n <span>Enter your height — </span>\n <label for=\"feet\">feet:</label>\n <input id=\"feet\" type=\"number\" name=\"feet\" min=\"0\" step=\"1\" />\n <span class=\"validity\"></span>\n <label for=\"inches\">inches:</label>\n <input id=\"inches\" type=\"number\" name=\"inches\" min=\"0\" max=\"11\" step=\"1\" />\n <span class=\"validity\"></span>\n </div>\n <div>\n <input\n type=\"button\"\n class=\"meters\"\n value=\"Enter height in feet and inches\" />\n </div>\n <div>\n <input type=\"submit\" value=\"Submit form\" />\n </div>\n</form>\n</code></pre></div>\n<p>Sie werden sehen, dass wir viele der Attribute verwenden, die wir im Artikel bereits behandelt haben. Da wir einen Meterwert in Zentimetern akzeptieren möchten, haben wir den <code>step</code>-Wert auf <code>0.01</code> gesetzt, sodass Werte wie <em>1.78</em> nicht als ungültig angesehen werden. Wir haben auch einen Platzhalter für diese Eingabe bereitgestellt.</p>\n<p>Wir haben die Fuß- und Zoll-Eingaben zunächst mit <code>style=\"display: none;\"</code> ausgeblendet, sodass Meter die Standard-Eingabemöglichkeit ist.</p>\n<p>Nun zum CSS. Dies sieht sehr ähnlich aus wie das Validierungsstyling, das wir zuvor gesehen haben; nichts Bemerkenswertes hier.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">css</span></div><pre class=\"brush: css notranslate\"><code>div {\n margin-bottom: 10px;\n position: relative;\n}\n\ninput[type=\"number\"] {\n width: 100px;\n}\n\ninput + span {\n padding-right: 30px;\n}\n\ninput:invalid + span::after {\n position: absolute;\n content: \"✖\";\n padding-left: 5px;\n}\n\ninput:valid + span::after {\n position: absolute;\n content: \"✓\";\n padding-left: 5px;\n}\n</code></pre></div>\n<p>Und schließlich das JavaScript:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const metersInputGroup = document.querySelector(\".metersInputGroup\");\nconst feetInputGroup = document.querySelector(\".feetInputGroup\");\nconst metersInput = document.querySelector(\"#meters\");\nconst feetInput = document.querySelector(\"#feet\");\nconst inchesInput = document.querySelector(\"#inches\");\nconst switchBtn = document.querySelector('input[type=\"button\"]');\n\nswitchBtn.addEventListener(\"click\", () => {\n if (switchBtn.getAttribute(\"class\") === \"meters\") {\n switchBtn.setAttribute(\"class\", \"feet\");\n switchBtn.value = \"Enter height in meters\";\n\n metersInputGroup.style.display = \"none\";\n feetInputGroup.style.display = \"block\";\n\n feetInput.setAttribute(\"required\", \"\");\n inchesInput.setAttribute(\"required\", \"\");\n metersInput.removeAttribute(\"required\");\n\n metersInput.value = \"\";\n } else {\n switchBtn.setAttribute(\"class\", \"meters\");\n switchBtn.value = \"Enter height in feet and inches\";\n\n metersInputGroup.style.display = \"block\";\n feetInputGroup.style.display = \"none\";\n\n feetInput.removeAttribute(\"required\");\n inchesInput.removeAttribute(\"required\");\n metersInput.setAttribute(\"required\", \"\");\n\n feetInput.value = \"\";\n inchesInput.value = \"\";\n }\n});\n</code></pre></div>\n<p>Nachdem wir einige Variablen deklariert haben, wird ein Event-Listener zum <code>button</code> hinzugefügt, um den Umschaltmechanismus zu kontrollieren. Dies beinhaltet das Ändern der <code>class</code> und <a href=\"/de/docs/Web/HTML/Element/label\"><code><label></code></a> des Buttons sowie das Aktualisieren der Anzeige der beiden Eingabesätze, wenn der Button gedrückt wird.</p>\n<p>(Beachten Sie, dass wir hier keinen hin- und hergehenden Umrechnungsmechanismus zwischen Metern und Fuß/Zoll implementieren, was eine echte Webanwendung wahrscheinlich tun würde.)</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn der Benutzer den Knopf drückt, entfernen wir das <code>required</code>-Attribut von den Eingaben, die wir ausblenden, und leeren die <code>value</code>-Attribute. Dadurch kann das Formular abgeschickt werden, wenn beide Eingabesätze nicht ausgefüllt sind. Es stellt auch sicher, dass das Formular keine Daten absendet, die der Benutzer nicht beabsichtigt hat.</p>\n<p>Wenn Sie dies nicht tun würden, müssten Sie sowohl Fuß/Zoll <strong>und</strong> Meter ausfüllen, um das Formular abzuschicken!</p>\n</div>"}},{"type":"prose","value":{"id":"technische_zusammenfassung","title":"Technische Zusammenfassung","isH3":false,"content":"<figure class=\"table-container\"><table class=\"properties\">\n <tbody>\n <tr>\n <td><strong><a href=\"#value\">Wert</a></strong></td>\n <td>Eine <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Number\"><code>Number</code></a>, die eine Zahl darstellt, oder leer</td>\n </tr>\n <tr>\n <td><strong>Ereignisse</strong></td>\n <td>\n [`change`](/de/docs/Web/API/HTMLElement/change_event) und\n [`input`](/de/docs/Web/API/Element/input_event)\n </td>\n </tr>\n <tr>\n <td><strong>Unterstützte gemeinsame Attribute</strong></td>\n <td>\n <a href=\"/de/docs/Web/HTML/Element/input#autocomplete\"><code>autocomplete</code></a>,\n <a href=\"/de/docs/Web/HTML/Element/input#list\"><code>list</code></a>,\n <a href=\"/de/docs/Web/HTML/Element/input#placeholder\"><code>placeholder</code></a>,\n <a href=\"/de/docs/Web/HTML/Element/input#readonly\"><code>readonly</code></a>\n </td>\n </tr>\n <tr>\n <td><strong>IDL-Attribute</strong></td>\n <td>\n <a href=\"/de/docs/Web/HTML/Element/input#list\"><code>list</code></a>,\n <a href=\"/de/docs/Web/HTML/Element/input#value\"><code>value</code></a>,\n <code>valueAsNumber</code>\n </td>\n </tr>\n <tr>\n <td><strong>DOM-Schnittstelle</strong></td>\n <td><p>[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)</p></td>\n </tr>\n <tr>\n <td><strong>Methode</strong></td>\n <td>\n [`select()`](/de/docs/Web/API/HTMLInputElement/select),\n [`stepUp()`](/de/docs/Web/API/HTMLInputElement/stepUp),\n [`stepDown()`](/de/docs/Web/API/HTMLInputElement/stepDown)\n </td>\n </tr>\n <tr>\n <td><strong>Implizite ARIA-Rolle</strong></td>\n <td>\n <code><a href=\"/de/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\">spinbutton</a></code>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"specifications","value":{"id":"spezifikationen","title":"Spezifikationen","isH3":false,"specifications":[{"bcdSpecificationURL":"https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)","title":"HTML"}],"query":"html.elements.input.type_number"}},{"type":"browser_compatibility","value":{"id":"browser-kompatibilität","title":"Browser-Kompatibilität","isH3":false,"query":"html.elements.input.type_number"}},{"type":"prose","value":{"id":"siehe_auch","title":"Siehe auch","isH3":false,"content":"<ul>\n<li><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">HTML Formularleitfaden</a></li>\n<li><a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a></li>\n<li><a href=\"/de/docs/Web/HTML/Element/input/tel\"><code><input type=\"tel\"></code></a></li>\n<li><a href=\"https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/\" class=\"external\" target=\"_blank\">Artikel: Warum Gov.UK den Eingabetyp für Zahlen geändert hat</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Web/HTML/Element/input/number","modified":"2025-02-26T00:19:22.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"<input type=\"number\">","native":"English (US)"},{"locale":"es","title":"<input type=\"number\">","native":"Español"},{"locale":"fr","title":"<input type=\"number\">","native":"Français"},{"locale":"ja","title":"<input type=\"number\">","native":"日本語"},{"locale":"ru","title":"<input type=\"number\">","native":"Русский"},{"locale":"zh-CN","title":"<input type=\"number\">","native":"中文 (简体)"}],"pageTitle":"<input type=\"number\"> - HTML: HyperText Markup Language | MDN","parents":[{"uri":"/de/docs/Web","title":"Webtechnologie für Entwickler"},{"uri":"/de/docs/Web/HTML","title":"HTML"},{"uri":"/de/docs/Web/HTML/Element","title":"HTML-Elemente-Referenz"},{"uri":"/de/docs/Web/HTML/Element/input","title":"<input>"},{"uri":"/de/docs/Web/HTML/Element/input/number","title":"<input type=\"number\">"}],"popularity":null,"short_title":"<input type=\"number\">","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Web/HTML\">HTML</a></li><li class=\"toggle\"><details><summary>Einsteiger-Tutorials</summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">Ihre erste Website: Inhalte erstellen</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary>Anleitungen</summary><ol><li><a href=\"/de/docs/Web/HTML/Content_categories\">Inhaltskategorien</a></li><li><a href=\"/de/docs/Glossary/Block-level_content\">Block-Elemente</a></li><li><a href=\"/de/docs/Glossary/Inline-level_content\">Inline-Elemente</a></li><li><a href=\"/de/docs/Web/HTML/Quirks_Mode_and_Standards_Mode\">Quirks-Modus und Standards-Modus</a></li><li><a href=\"/de/docs/Web/HTML/Date_and_time_formats\">Datums- und Zeitformate in HTML</a></li><li><a href=\"/de/docs/Web/HTML/Constraint_validation\">Einschränkungsvalidierung</a></li><li><a href=\"/de/docs/Web/HTML/Microdata\">Mikrodaten</a></li><li><a href=\"/de/docs/Web/HTML/microformats\">Mikroformate</a></li><li><a href=\"/de/docs/Web/HTML/Viewport_meta_tag\">Viewport-Meta-Tag</a></li><li><a href=\"/de/docs/Web/HTML/CORS_enabled_image\">Erlauben der Cross-Origin-Nutzung von Bildern und Canvas</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Web/HTML/Reference\">Referenzen</a></li><li class=\"toggle\"><details><summary>HTML-Elemente</summary><ol><li><a href=\"/de/docs/Web/HTML/Element/a\"><code><a></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/abbr\"><code><abbr></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/acronym\"><code>`<acronym>`</code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/address\"><code><address></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/area\"><code><area></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/article\"><code><article></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/aside\"><code><aside></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/audio\"><code><audio></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/b\"><code><b></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/base\"><code><base></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/bdi\"><code><bdi></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/bdo\"><code><bdo></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/big\"><code><big></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/blockquote\"><code><blockquote></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/body\"><code><body></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/br\"><code><br></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/button\"><code><button></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/canvas\"><code><canvas></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/caption\"><code><caption></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/center\"><code><center></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/cite\"><code><cite></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/code\"><code><code></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/col\"><code><col></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/colgroup\"><code><colgroup></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/data\"><code><data></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/datalist\"><code><datalist></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/dd\"><code><dd></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/del\"><code><del></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/details\"><code><details></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/dfn\"><code><dfn></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/dialog\"><code><dialog></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/dir\"><code><dir></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/dl\"><code><dl></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/dt\"><code><dt></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/em\"><code><em></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/embed\"><code><embed></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/fencedframe\"><code><fencedframe></code></a><abbr class=\"icon icon-experimental\" title=\"Experimentell. Das Verhalten könnte sich in Zukunft ändern.\">\n<span class=\"visually-hidden\">Experimentell</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/fieldset\"><code><fieldset></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/figcaption\"><code><figcaption></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/figure\"><code><figure></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/font\"><code><font></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/footer\"><code><footer></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/form\"><code><form></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/frame\"><code><frame></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/frameset\"><code><frameset></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/Heading_Elements\"><code>`<h1>`–`<h6>`: Die HTML-Abschnittsüberschriftselemente</code></a></li><li><a href=\"/de/docs/Web/HTML/Element/head\"><code><head></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/header\"><code><header></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/hgroup\"><code><hgroup></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/hr\"><code><hr></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/html\"><code><html></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/i\"><code><i></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/iframe\"><code><iframe></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/img\"><code><img></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input\"><code><input></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/ins\"><code><ins></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/kbd\"><code><kbd></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/label\"><code><label></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/legend\"><code><legend></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/li\"><code><li></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/link\"><code><link></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/main\"><code><main></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/map\"><code><map></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/mark\"><code><mark></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/marquee\"><code><marquee></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/menu\"><code><menu></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/meta\"><code><meta></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/meter\"><code><meter></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/nav\"><code><nav></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/nobr\"><code><nobr></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/noembed\"><code><noembed></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/noframes\"><code><noframes></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/noscript\"><code><noscript></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/object\"><code><object></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/ol\"><code><ol></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/optgroup\"><code><optgroup></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/option\"><code><option></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/output\"><code><output></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/p\"><code><p></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/param\"><code><param></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/picture\"><code><picture></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/plaintext\"><code><plaintext></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/pre\"><code><pre></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/progress\"><code><progress></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/q\"><code><q></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/rb\"><code><rb></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/rp\"><code><rp></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/rt\"><code><rt></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/rtc\"><code><rtc></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/ruby\"><code><ruby></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/s\"><code><s></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/samp\"><code><samp></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/script\"><code><script></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/search\"><code><search></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/section\"><code><section></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/select\"><code><select></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/slot\"><code><slot></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/small\"><code><small></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/source\"><code><source></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/span\"><code><span></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/strike\"><code><strike></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/strong\"><code><strong></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/style\"><code><style></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/sub\"><code><sub></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/summary\"><code><summary></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/sup\"><code><sup></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/table\"><code><table></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/tbody\"><code><tbody></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/td\"><code><td></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/template\"><code><template></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/textarea\"><code><textarea></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/tfoot\"><code><tfoot></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/th\"><code><th></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/thead\"><code><thead></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/time\"><code><time></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/title\"><code><title></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/tr\"><code><tr></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/track\"><code><track></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/tt\"><code><tt></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Element/u\"><code><u></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/ul\"><code>`<ul>`: Das ungeordnete Listen-Element</code></a></li><li><a href=\"/de/docs/Web/HTML/Element/var\"><code><var></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/video\"><code><video></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/wbr\"><code><wbr></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/xmp\"><code><xmp></code></a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>Globale Attribute</summary><ol><li><a href=\"/de/docs/Web/HTML/Global_attributes/accesskey\"><code>accesskey</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/anchor\"><code>anchor</code></a><abbr class=\"icon icon-experimental\" title=\"Experimentell. Das Verhalten könnte sich in Zukunft ändern.\">\n<span class=\"visually-hidden\">Experimentell</span>\n</abbr><abbr class=\"icon icon-nonstandard\" title=\"Nicht standardisiert. Überprüfen Sie vor der Verwendung die Browser-Kompatibilität.\">\n<span class=\"visually-hidden\">Nicht standardisiert</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/autocapitalize\"><code>autocapitalize</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/autocorrect\"><code>autocorrect</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/autofocus\"><code>autofocus</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/class\"><code>class</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/contenteditable\"><code>contenteditable</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/data-*\"><code>data-*</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/dir\"><code>dir</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/draggable\"><code>draggable</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/enterkeyhint\"><code>enterkeyhint</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/exportparts\"><code>exportparts</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/hidden\"><code>hidden</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/id\"><code>id</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/inert\"><code>inert</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/inputmode\"><code>inputmode</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/is\"><code>is</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/itemid\"><code>itemid</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/itemprop\"><code>itemprop</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/itemref\"><code>itemref</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/itemscope\"><code>itemscope</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/itemtype\"><code>itemtype</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/lang\"><code>lang</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/nonce\"><code>nonce</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/part\"><code>part</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/popover\"><code>popover</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/slot\"><code>slot</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/spellcheck\"><code>spellcheck</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/style\"><code>style</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/tabindex\"><code>tabindex</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/title\"><code>title</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/translate\"><code>translate</code></a></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy\"><code>virtualkeyboardpolicy</code></a><abbr class=\"icon icon-experimental\" title=\"Experimentell. Das Verhalten könnte sich in Zukunft ändern.\">\n<span class=\"visually-hidden\">Experimentell</span>\n</abbr></li><li><a href=\"/de/docs/Web/HTML/Global_attributes/writingsuggestions\"><code>writingsuggestions</code></a></li></ol></details></li><li class=\"toggle\"><details><summary>Attribute</summary><ol><li><a href=\"/de/docs/Web/HTML/Attributes/accept\">accept</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/autocomplete\">autocomplete</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/capture\">capture</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/crossorigin\">crossorigin</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/dirname\">dirname</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/disabled\">disabled</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/elementtiming\">elementtiming</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/for\">for</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/max\">max</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/maxlength\">maxlength</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/min\">min</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/minlength\">minlength</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/multiple\">multiple</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/pattern\">pattern</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/placeholder\">placeholder</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/readonly\">readonly</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/rel\">rel</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/required\">required</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/size\">size</a></li><li><a href=\"/de/docs/Web/HTML/Attributes/step\">step</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><code><input></code>-Typen</summary><ol><li><a href=\"/de/docs/Web/HTML/Element/input/button\"><code><input type=\"button\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/checkbox\"><code><input type=\"checkbox\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/color\"><code><input type=\"color\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/date\"><code><input type=\"date\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/datetime-local\"><code><input type=\"datetime-local\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/email\"><code><input type=\"email\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/file\"><code><input type=\"file\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/hidden\"><code><input type=\"hidden\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/image\"><code><input type=\"image\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/month\"><code><input type=\"month\"></code></a></li><li><em><a href=\"/de/docs/Web/HTML/Element/input/number\" aria-current=\"page\"><code><input type=\"number\"></code></a></em></li><li><a href=\"/de/docs/Web/HTML/Element/input/password\"><code><input type=\"password\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/radio\"><code><input type=\"radio\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/range\"><code><input type=\"range\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/reset\"><code><input type=\"reset\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/search\"><code><input type=\"search\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/submit\"><code><input type=\"submit\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/tel\"><code><input type=\"tel\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/text\"><code><input type=\"text\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/time\"><code><input type=\"time\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/url\"><code><input type=\"url\"></code></a></li><li><a href=\"/de/docs/Web/HTML/Element/input/week\"><code><input type=\"week\"></code></a></li></ol></details></li></ol>","source":{"folder":"de/web/html/element/input/number","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/web/html/element/input/number/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/1c835a0234aec5e4dbbcf0bc219f2ae7ac393018","filename":"index.md"},"summary":"<input>-Elemente des Typs number werden verwendet, um dem Benutzer das Eingeben einer Zahl zu ermöglichen. Sie enthalten eine integrierte Validierung, um nicht numerische Eingaben abzulehnen.","title":"<input type=\"number\">","toc":[{"text":"Probieren Sie es aus","id":"probieren_sie_es_aus"},{"text":"Wert","id":"wert"},{"text":"Zusätzliche Attribute","id":"zusätzliche_attribute"},{"text":"Verwendung von Zahleneingaben","id":"verwendung_von_zahleneingaben"},{"text":"Validierung","id":"validierung"},{"text":"Barrierefreiheit","id":"barrierefreiheit"},{"text":"Beispiele","id":"beispiele"},{"text":"Technische Zusammenfassung","id":"technische_zusammenfassung"},{"text":"Spezifikationen","id":"spezifikationen"},{"text":"Browser-Kompatibilität","id":"browser-kompatibilität"},{"text":"Siehe auch","id":"siehe_auch"}],"baseline":{"baseline":"high","baseline_low_date":"2015-07-29","baseline_high_date":"2018-01-29","support":{"chrome":"7","chrome_android":"18","edge":"12","firefox":"29","firefox_android":"29","safari":"5.1","safari_ios":"5"}},"browserCompat":["html.elements.input.type_number"],"pageType":"html-element"}}</script></body></html>