<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend class="text-center">請填下相關抽獎資訊 ：</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="NAME">中文姓名</label> <div class="col-md-5"> <input type="text" name="NAME" class="form-control" maxlength="10" placeholder="請填寫參加者中文姓名" pattern="^[a-zA-Z\u4e00-\u9fa5]{2,5}$" required oninvalid="setCustomValidity('請輸入正確的中文姓名!');" oninput="setCustomValidity('');" /> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="EMAIL">聯絡信箱</label> <div class="col-md-5"> <input type="email" name="EMAIL" class="form-control" placeholder="請填寫聯絡用之常用電子信箱" required oninvalid="setCustomValidity('請輸入正確的EMAIL地址!');" oninput="setCustomValidity('');" /> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TEL">聯絡電話</label> <div class="col-md-5"> <input type="text" name="TEL" class="form-control" maxlength="20" placeholder="請填寫家用或行動電話" pattern="\d{2,4}-\d{6,8}" required oninvalid="setCustomValidity('請輸入正確的電話格式!');" oninput="setCustomValidity('');" /> <span class="help-block">格式:02-XXXXXXXX 或 09XX-XXXXXX</span> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for=""></label> <div class="col-md-8"> <button id="" name="" class="btn btn-primary">送出資訊</button> <button id="" name="" class="btn btn-success">取消資訊</button> </div> </div> </fieldset> </form> </div> </div> </div>