Bootstrap Form Input


The most common form text field is the input field. This is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime,datetime-local, date, month, time, week, number, email, url, search, tel, and color. The proper type declaration is required to make Inputs fully styled.

 You can try to run the following code to learn how to work with form input in Bootstrap

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Form Input</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </head>
   <body>
      <form role = "form">
         <div class = "form-group">
            <label for = "name">Player</label>
            <input type = "text" class = "form-control" placeholder = "Player Name">
         </div>
         <div class = "form-group">
            <label for = "name">Rank</label>
            <input type = "text" class = "form-control" placeholder = "Player Rank">
         </div>
      </form>
   </body>
</html>

Lakshmi Srinivas
Lakshmi Srinivas

Programmer / Analyst / Technician

Updated on: 12-Jun-2020

149 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements