부트 스트랩 양식을 설정하는 방법

Bootstrap은 프레임 워크로드, 양식 작성, 양식 요소 추가, 스타일 설정, 유효성 검사 추가 및 양식 데이터를 포함하여 양식을 설정하는 일련의 단계를 제공합니다. 그중에서도 양식 스타일을 설정하는 것이 포함됩니다 : .form-control 클래스 스타일을 사용하여 모든 형태의 요소에 적용; .input-Group 클래스 스타일을 입력 상자와 같은 그룹 요소에 사용; 그리고 .form-group 클래스 스타일을 사용하여 그룹 관련 양식 요소를 그룹화합니다.

부트 스트랩을 사용하여 양식을 설정하는 방법

Bootstrap은 아름답고 실용적인 웹 페이지를 쉽게 만들 수있는 다양한 내장 스타일과 구성 요소를 제공하는 인기있는 프론트 엔드 프레임 워크입니다. 이 기사에서는 부트 스트랩을 사용하여 양식을 설정하는 방법을 설명합니다.

1 단계 : 부트 스트랩을로드합니다

먼저 웹 페이지에 부트 스트랩 CSS 및 JavaScript 파일을로드해야합니다.

 <code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.min.js"></script></code>

2 단계 : 양식을 만듭니다

html <form></form> 태그를 사용하여 양식을 만듭니다.

 <code class="html"><form action="/submit" method="post"> ... </form></code>

3 단계 : 양식 요소를 추가하십시오

<form></form> 태그에는 입력 상자, 선택 상자, 라디오 버튼, 확인란 등을 포함한 다양한 양식 요소를 추가 할 수 있습니다.

 <code class="html"><input type="text" name="name" placeholder="姓名"> <select name="gender"> <option value="male">男</option> <option value="female">女</option> </select> <input type="checkbox" name="terms" value="1"> <label for="terms">我同意条款</label></code>

4 단계 : 양식 스타일을 설정합니다

부트 스트랩은 여러 가지 양식 스타일 클래스를 제공합니다.

• .form-control : 모든 양식 요소에 적용 가능합니다
• .input-group : 입력 상자 및 기타 요소를 그룹화하는 데 사용
• .form-group : 관련 양식 요소 그룹을 그룹화하는 데 사용

5 단계 : 양식 검증을 추가하십시오

Bootstrap은 양식 입력을 확인하는 데 도움이되는 검증 플러그인을 제공합니다.

 <code class="html"><script> // 为表单元素添加验证规则$(&#39;form&#39;).validate({ rules: { name: "required", gender: "required", terms: "required" } }); </script></code>

6 단계 : 양식 데이터를 처리합니다

양식을 제출하면 PHP, Node.js 또는 기타 백엔드 언어를 사용하여 양식 데이터를 처리 할 수 ​​있습니다.

 <code class="php"><?php if (isset($_POST[&#39;name&#39;]) && isset($_POST[&#39;gender&#39;]) && isset($_POST[&#39;terms&#39;])) { // 处理表单数据} ?></code>

예

다음은 부트 스트랩을 사용하여 세트하는 예제입니다.

 <code class="html"><form action="/submit" method="post"> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" name="name" placeholder="姓名"> </div> <div class="form-group"> <label for="gender">性别</label> <select class="form-control" name="gender"> <option value="male">男</option> <option value="female">女</option> </select> </div> <div class="form-group"> <label for="terms">我同意条款</label> <input type="checkbox" class="form-control" name="terms" value="1"> </div> <button type="submit" class="btn btn-primary">提交</button> </form></code>

위 내용은 부트 스트랩 양식을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!