2014-04-11 6 views
0

나는 형태가 : 내가 좋아하는 것HTML5 유효성 검사

<form method"post" action="#" class="form-horizontal" id="form"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email:</label> 
    <div class="col-sm-10"> 
     <input type="email" name="email" placeholder="Email" class="form-control" id="email" required/> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Subject:</label> 
    <div class="col-sm-10"> 
     <input type="text" name="subject" placeholder="Subject" class="form-control" id="subject" required/> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Message:</label> 
    <div class="col-sm-10"> 
     <textarea name="message" rows="4" class="form-control" placeholder="Message" id="message" required></textarea> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-primary btn-lg btn-block" id="send">Send</button> 
    </div> 
    </div> 
    <div class="form-group hidden" id="successMsg"> 
    <label class="col-sm-2"></label> 
    <label class="col-sm-10" style="color:#198C19;">Thanks for your message!</label> 
    </div> 
</form> 

검증 한 수를하고 필수 필드입니다, 또는 있다는 것을 나타 내기 위해 옆에있는 멋진 작은 HTML5 팝업이 type="email" 입력 요소의 이메일 주소가 아닙니다. 내 컴퓨터의 로컬 서버에서이 작업을 수행했습니다. 하지만 CentOS 서버로 이동 한 후에는 더 이상 작동하지 않습니다. CentOS에서 LAMP를 실행 중입니다. 어떻게 작동시킬 수 있을까요? HTML5에 내장되어 있다고 생각했습니다. 또한 doctype이 <!DOCTYPE html>이라고 선언하는 것 이외에 다른 작업을해야만 HTML5로 처리 될 수 있습니까?

+0

어떤 브라우저를 사용하고 있습니까? – nmenego

+0

^이 버블 팝은 briansol

답변

0

이 코드가 작동하는지 확인했습니다. BTW : 서버에 대해 언급했습니다. html의 경우에는 정말로 중요하지 않습니다. 서버가 html을 보내는 한, 마크 업을 렌더링하는 브라우저 (엄격하게 클라이언트 측)

명확한 설명을 위해 다른 태그가 렌더링에 영향을주는 경우를 위해 여기에 제가 시도한 전체 예제가 있습니다. 내 로컬 서버 (IE11, FF28, 크롬 33.0.1750.154m 및 크롬 카나리아에서 근무)

<!doctype html> 
<html> 
<body> 
<form method"post" action="#" class="form-horizontal" id="form"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email:</label> 
    <div class="col-sm-10"> 
     <input type="email" name="email" placeholder="Email" class="form-control" id="email" required/> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Subject:</label> 
    <div class="col-sm-10"> 
     <input type="text" name="subject" placeholder="Subject" class="form-control" id="subject" required/> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Message:</label> 
    <div class="col-sm-10"> 
     <textarea name="message" rows="4" class="form-control" placeholder="Message" id="message" required></textarea> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-primary btn-lg btn-block" id="send">Send</button> 
    </div> 
    </div> 
    <div class="form-group hidden" id="successMsg"> 
    <label class="col-sm-2"></label> 
    <label class="col-sm-10" style="color:#198C19;">Thanks for your message!</label> 
    </div> 
</form> 
</body> 
</html>