Bring up number keypad for port on mobile phones, URL for address

An alternative would be type="tel", which has bigger number buttons for me,
but it seems wrong to use.

css/glowingbear.css

@@ -109,13 +109,18 @@ input#sendMessage {
 .panel input, .panel .input-group {
     max-width: 300px;
 }
-input[type=text], input[type=password], .badge {
+input[type=text], input[type=number], input[type=url], input[type=password], .badge {
     border: 0;
     border-radius: 0;
     color: #ccc;
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
 }
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
 #topbar {
     position: fixed;
     width: 100%;

index.html

@@ -57,8 +57,8 @@
                   <div class="form-group">
                     <label class="control-label" for="host">WeeChat relay hostname and port number</label>
                     <div class="input-group">
-                      <input type="text" class="form-control monospace" id="host" ng-model="host" placeholder="Address">
-                      <input type="text" class="form-control monospace" id="port" ng-model="port" placeholder="9001">
+                      <input type="url" class="form-control monospace" id="host" ng-model="host" placeholder="Address" autocorrect="off" autocomplete="off" autocapitalize="off">
+                      <input type="number" pattern="[0-9]*" class="form-control monospace" id="port" ng-model="port" placeholder="9001">
                     </div>
                     <label class="control-label" for="password">WeeChat relay password</label>
                     <input type="password" class="form-control monospace" id="password" ng-model="password" placeholder="Password">