ميتا إكسبرس


bootstrap input

الناشر: WEB School

القسم: Bootstrap

تاريخ النشر: 2021-06-29





code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Form control: input</h2>
  <p>The form below contains two input elements; one of type text and one of type password:</p>
  <form>
    <div class=\"form-group\">
      <label for=\"usr\">Name:</label>
      <input type=\"text\" class=\"form-control\" id=\"usr\">
    </div>
    <div class=\"form-group\">
      <label for=\"pwd\">Password:</label>
      <input type=\"password\" class=\"form-control\" id=\"pwd\">
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Form control: textarea</h2>
  <p>The form below contains a textarea for comments:</p>
  <form>
    <div class=\"form-group\">
      <label for=\"comment\">Comment:</label>
      <textarea class=\"form-control\" rows=\"5\" id=\"comment\"></textarea>
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Form control: checkbox</h2>
  <p>The form below contains three checkboxes. The last option is disabled:</p>
  <form>
    <div class=\"checkbox\">
      <label><input type=\"checkbox\" value=\"\">Option 1</label>
    </div>
    <div class=\"checkbox\">
      <label><input type=\"checkbox\" value=\"\">Option 2</label>
    </div>
    <div class=\"checkbox disabled\">
      <label><input type=\"checkbox\" value=\"\" disabled>Option 3</label>
    </div>
  </form>
</div>

<div class=\"container\">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains three inline checkboxes:</p>
  <form>
    <label class=\"checkbox-inline\">
      <input type=\"checkbox\" value=\"\">Option 1
    </label>
    <label class=\"checkbox-inline\">
      <input type=\"checkbox\" value=\"\">Option 2
    </label>
    <label class=\"checkbox-inline\">
      <input type=\"checkbox\" value=\"\">Option 3
    </label>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Form control: radio buttons</h2>
  <p>The form below contains three radio buttons. The last option is disabled:</p>
  <form>
    <div class=\"radio\">
      <label><input type=\"radio\" name=\"optradio\" checked>Option 1</label>
    </div>
    <div class=\"radio\">
      <label><input type=\"radio\" name=\"optradio\">Option 2</label>
    </div>
    <div class=\"radio disabled\">
      <label><input type=\"radio\" name=\"optradio\" disabled>Option 3</label>
    </div>
  </form>
</div>


<div class=\"container\">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form>
    <label class=\"radio-inline\">
      <input type=\"radio\" name=\"optradio\" checked>Option 1
    </label>
    <label class=\"radio-inline\">
      <input type=\"radio\" name=\"optradio\">Option 2
    </label>
    <label class=\"radio-inline\">
      <input type=\"radio\" name=\"optradio\">Option 3
    </label>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form>
    <div class=\"form-group\">
      <label for=\"sel1\">Select list (select one):</label>
      <select class=\"form-control\" id=\"sel1\">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for=\"sel2\">Mutiple select list (hold shift to select more than one):</label>
      <select multiple class=\"form-control\" id=\"sel2\">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Horizontal form with static control</h2>
  <form class=\"form-horizontal\" action=\"/action_page.php\">
    <div class=\"form-group\">
      <label class=\"control-label col-sm-2\">Email:</label>
      <div class=\"col-sm-10\">
        <p class=\"form-control-static\">someone@example.com</p>
      </div>
    </div>
    <div class=\"form-group\">
      <label class=\"control-label col-sm-2\" for=\"pwd\">Password:</label>
      <div class=\"col-sm-10\">          
        <input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Enter password\" name=\"pwd\">
      </div>
    </div>
    <div class=\"form-group\">        
      <div class=\"col-sm-offset-2 col-sm-10\">
        <button type=\"submit\" class=\"btn btn-default\">Submit</button>
      </div>
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h3>Input Groups</h3>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a \"help text\".</p>
  <p>The .input-group-addon class attaches an icon or help text next to the input field.</p>
  
  <form>
    <div class=\"input-group\">
      <span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-user\"></i></span>
      <input id=\"email\" type=\"text\" class=\"form-control\" name=\"email\" placeholder=\"Email\">
    </div>
    <div class=\"input-group\">
      <span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-lock\"></i></span>
      <input id=\"password\" type=\"password\" class=\"form-control\" name=\"password\" placeholder=\"Password\">
    </div>
    <br>
    <div class=\"input-group\">
      <span class=\"input-group-addon\">Text</span>
      <input id=\"msg\" type=\"text\" class=\"form-control\" name=\"msg\" placeholder=\"Additional Info\">
    </div>
  </form>
  <br>

  <p>It can also be used on the right side of the input:</p>
  <form>
    <div class=\"input-group\">
      <input id=\"email\" type=\"text\" class=\"form-control\" name=\"email\" placeholder=\"Email\">
      <span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-user\"></i></span>   
    </div>
    <div class=\"input-group\">
      <input id=\"password\" type=\"password\" class=\"form-control\" name=\"password\" placeholder=\"Password\">
      <span class=\"input-group-addon\"><i class=\"glyphicon glyphicon-lock\"></i></span>
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>
  
<div class=\"container\">
  <h1>Input Group Button</h1>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a \"help text\".</p>
  <p>The .input-group-btn class attaches a button next to an input field. This is often used as a search bar:</p>
  <form action=\"/action_page.php\">
    <div class=\"input-group\">
      <input type=\"text\" class=\"form-control\" placeholder=\"Search\" name=\"search\">
      <div class=\"input-group-btn\">
        <button class=\"btn btn-default\" type=\"submit\"><i class=\"glyphicon glyphicon-search\"></i></button>
      </div>
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Horizontal form: control states</h2>
  <form class=\"form-horizontal\">
    <div class=\"form-group\">
      <label class=\"col-sm-2 control-label\">Focused</label>
      <div class=\"col-sm-10\">
        <input class=\"form-control\" id=\"focusedInput\" type=\"text\" value=\"Click to focus...\">
      </div>
    </div>
    <div class=\"form-group\">
      <label for=\"disabledInput\" class=\"col-sm-2 control-label\">Disabled</label>
      <div class=\"col-sm-10\">
        <input class=\"form-control\" id=\"disabledInput\" type=\"text\" placeholder=\"Disabled input here...\" disabled>
      </div>
    </div>
    <fieldset disabled>
      <div class=\"form-group\">
        <label for=\"disabledTextInput\" class=\"col-sm-2 control-label\">Disabled input and select list (Fieldset disabled)</label>
        <div class=\"col-sm-10\">
          <input type=\"text\" id=\"disabledTextInput\" class=\"form-control\" placeholder=\"Disabled input\">
        </div>
      </div>
      <div class=\"form-group\">
        <label for=\"disabledSelect\" class=\"col-sm-2 control-label\"></label>
        <div class=\"col-sm-10\">
          <select id=\"disabledSelect\" class=\"form-control\">
            <option>Disabled select</option>
          </select>
        </div>
      </div>
    </fieldset>
    <div class=\"form-group has-success has-feedback\">
      <label class=\"col-sm-2 control-label\" for=\"inputSuccess\">Input with success and glyphicon</label>
      <div class=\"col-sm-10\">
        <input type=\"text\" class=\"form-control\" id=\"inputSuccess\">
        <span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>
      </div>
    </div>
    <div class=\"form-group has-warning has-feedback\">
      <label class=\"col-sm-2 control-label\" for=\"inputWarning\">Input with warning and glyphicon</label>
      <div class=\"col-sm-10\">
        <input type=\"text\" class=\"form-control\" id=\"inputWarning\">
        <span class=\"glyphicon glyphicon-warning-sign form-control-feedback\"></span>
      </div>
    </div>
    <div class=\"form-group has-error has-feedback\">
      <label class=\"col-sm-2 control-label\" for=\"inputError\">Input with error and glyphicon</label>
      <div class=\"col-sm-10\">
        <input type=\"text\" class=\"form-control\" id=\"inputError\">
        <span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>
      </div>
    </div>
  </form>
</div>

</body>
</html>






code
نسخ
اقتباس
عرض
تنزيل 
	
								
<!DOCTYPE html>
<html lang=\"en\">
<head>
  <title>Bootstrap Example</title>
  <meta charset=\"utf-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">
  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>
</head>
<body>

<div class=\"container\">
  <h2>Inline form: control states</h2>
  <form class=\"form-inline\">
    <div class=\"form-group\">
      <label for=\"focusedInput\">Focused</label>
      <input class=\"form-control\" id=\"focusedInput\" type=\"text\">
    </div>
    <div class=\"form-group\">
      <label for=\"inputPassword\">Disabled</label>
      <input class=\"form-control\" id=\"disabledInput\" type=\"text\" disabled>
    </div>
    <div class=\"form-group has-success has-feedback\">
      <label for=\"inputSuccess2\">Input with success</label>
      <input type=\"text\" class=\"form-control\" id=\"inputSuccess2\">
      <span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>
    </div>
    <div class=\"form-group has-warning has-feedback\">
      <label for=\"inputWarning2\">Input with warning</label>
      <input type=\"text\" class=\"form-control\" id=\"inputWarning2\">
      <span class=\"glyphicon glyphicon-warning-sign form-control-feedback\"></span>
    </div>
    <div class=\"form-group has-error has-feedback\">
      <label for=\"inputError2\">Input with error</label>
      <input type=\"text\" class=\"form-control\" id=\"inputError2\">
      <span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>
    </div>
  </form>
</div>

</body>
</html>




عرض السلة (تأكيد الشراء) افراغ السلة
اتمام الشراء