>  기사  >  웹 프론트엔드  >  부트스트랩 모달 상자에 양식을 제출하는 방법

부트스트랩 모달 상자에 양식을 제출하는 방법

藏色散人
藏色散人원래의
2020-12-17 09:09:353219검색

부트스트랩 모달 상자에서 양식을 제출하는 방법: 먼저 해당 코드 파일을 연 다음 모달 상자의 모달 본문에 직접 양식을 작성하고 마지막으로 작업이 제출될 때 이동할 링크를 설정합니다.

부트스트랩 모달 상자에 양식을 제출하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "bootstrap tutorial" "css video tutorial"

bootstrap 모달 상자 제출 양식

일반 양식 양식처럼 모달 상자의 모달 본문에 양식 양식을 직접 작성합니다. 처리 , 액션 = 제출 시 점프할 수 있는 링크입니다.

부트스트랩의 모달 프레임워크 구조를 따르면 최종 저장은 반드시 폼 외부에 배치해야 하지만 submit 버튼이 폼 외부에 배치되면 해당 폼을 submit할 수 없으므로 반드시 폼 내부에 배치해야 한다.

<div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">添加数据字典</h4>
      </div>
      <div class="modal-body">
      <form class="form-horizontal" role="form" id="add-key-form" action="system/dic-save.json" method="post">
   <div class="form-group">
      <label class="col-sm-2 control-label"><i class="required">* </i>键:</label>
      <div class="col-sm-4">
         <input type="text" class="form-control" name="keyName" placeholder="请输入字典键"/>
      </div>
      <label class="col-sm-2 control-label"><i class="required">* </i>值:</label>
      <div class="col-sm-4">
         <input type="text" class="form-control" name="keyValue" placeholder="请输入字典值">
      </div>
   </div>
  <div class="modal-footer">
        <button type="submit" class="btn btn-primary">保存</button>
  </div>
</form>
      </div>
</div>

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.