콘텐츠로 건너뛰기
BIZMARK

BIZMARK

최신 이슈와 일상 유머, 사회적 현상, 엔터테인먼트, 기술, 문화 등 재미있는 콘텐츠로 뜨거운 이슈를 다루며 이해와 미소를 전하고자 합니다.

기본 메뉴 BIZMARK

BIZMARK

  • 홈
  • 주제별 콘텐츠
    • 핫 이슈
    • 게임 세상
      • Warframe
      • Path of exilePath of exile Tips
    • IT
      • WordPress
      • Free Template
      • BITCOINCategory Added in a WPeMatico Campaign
      • Online Marketing
  • 라이프 스타일
    • 건강
    • 여행
    • 캠핑
    • 쇼핑Shopping Information on the latest and popular products
    • 생활용품
  • 유용한 도구
    • 글자수 세기
    • 신발 사이즈 변환
  • 문의하기
  • 홈
  • Wordpress
  • Free Template
  • Bootstrap-부트스트랩 로그인 폼
  • Free Template

Bootstrap-부트스트랩 로그인 폼

bizmark 2016년 3월 3일

부트스트랩 로그인 폼 : Free

회원가입 폼 필요하시면…

이번에 프로젝트 하면서 만들었던 회원가입 폼 입니다.
주로 사이드바가 있는 레이아웃에서 사용하시면 좋을 듯 하구요
모달을 사용하여 구현 하셔도 좋을 것 같습니다.

Bootstrap-부트스트랩 로그인 폼 1

일단 디자인이 심플하고 깔끔해서 어디에 적용해도 좋을거 같습니다.(개인적으로)
라이센스 머 그런거 전혀 없으니 막 가져다가 쓰셔도 됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>free login form -bootstrap</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- font awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom Style -->
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></scri.row>.containerpt>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="page-header">
          <h2>심플한 로그인 폼</h2>
        </div>
        <div class="col-md-3">
          <div class="login-box well">
        <form accept-charset="UTF-8" role="form" method="post" action="">
            <legend>로그인</legend>
            <div class="form-group">
                <label for="username-email">이메일 or 아이디</label>
                <input name="user_id" value='' id="username-email" placeholder="E-mail or Username" type="text" class="form-control" />
            </div>
            <div class="form-group">
                <label for="password">비밀번호</label>
                <input name="password" id="password" value='' placeholder="Password" type="password" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-default btn-login-submit btn-block m-t-md" value="Login" />
            </div>
            <span class='text-center'><a href="/bbs/index.php?mid=index&act=dispMemberFindAccount" class="text-sm">비밀번호 찾기</a></span>
            <hr />
            <div class="form-group">
                <a href="" class="btn btn-default btn-block m-t-md"> 회원가입</a>
            </div>
        </form>
          </div>
        </div>
      </div>
    </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  </body>
  </html>

Post navigation

Previous: 워드프레스 오류- 이 페이지에 접근할 권한이 없습니다.
Next: 모달 여러개 만들기(멀티모달)-bootstrap multiple modal

More Stories

Reponsive HTML Table – 반응형 html 테이블
  • Free Template

Reponsive HTML Table – 반응형 html 테이블

bizmark 2023년 6월 28일
무료 템플릿 – 로그인 폼,회원가입 폼
  • Free Template

무료 템플릿 – 로그인 폼,회원가입 폼

bizmark 2020년 2월 11일
부트스트랩 사용시 유용한 플러그인
  • Free Template

부트스트랩 사용시 유용한 플러그인

bizmark 2016년 4월 4일

“Bootstrap-부트스트랩 로그인 폼”의 6개의 생각

  1. 헤이장 댓글:
    2017년 1월 23일, 2:16 오전

    안녕하세요. 회원가입폼과 로그인폼 심플하고 정말 잘 만드셨네요.
    배우고 싶네요.
    실제 서비스에 쓰거나 서비스 전 임시 디자인으로 사용할 예정입니다.
    감사히 잘 쓰겠습니다.

    1. contact@bizmark.co.kr 댓글:
      2017년 1월 23일, 9:20 오전

      맘에 드신다니 너무너무 좋습니다.
      더 많은것을 만들어서 공유하겠습니다.
      감사합니다~~

  2. 이주희 댓글:
    2018년 4월 8일, 3:40 오후

    안녕하세요 개인프로젝트를하려는데 마땅한 로그인폼이없어서 고민했었는데 덕분에 큰 도움 받았습니다. 감사합니다.

    1. contact@bizmark.co.kr 댓글:
      2018년 4월 11일, 3:46 오후

      도음 되셨다니 좋네요~ 글 까지 남겨 주셔서 감사합니다~

  3. 배 댓글:
    2018년 5월 5일, 1:50 오후

    너무 마음에 들어서 사용하려 하는데
    style.css는 어디 있나요??

    1. 배 댓글:
      2018년 5월 5일, 4:53 오후

      잘 사용하렉요

댓글이 닫혔습니다.

요즘 화제인 글

  • 불륜하다가 죽은 고향친구 장례식에 가야 하나요?
    불륜하다가 죽은 고향친구 장례식에 가야 하나요?
    2025년 10월 13일
  • 바람핀 아내에게 빌고 사는 남자
    바람핀 아내에게 빌고 사는 남자
    2025년 10월 13일
  • 축의금 50했는데, 30돌아옴
    축의금 50했는데, 30돌아옴
    2025년 10월 12일

건강정보

  • 화병, 원인부터 치료까지 완벽 분석
    화병, 원인부터 치료까지 완벽 분석
    2025년 6월 11일
  • 오십견에 좋은 운동을 알려드려요.
    오십견에 좋은 운동을 알려드려요.
    2025년 2월 20일
  • 달걀 장조림을 이렇게 하면 영양소 손실 제로!
    달걀 장조림을 이렇게 하면 영양소 손실 제로!
    2025년 2월 12일

건강식품

  • 신선함이 식탁으로! 친환경 팽이버섯 초특가 할인
    신선함이 식탁으로! 친환경 팽이버섯 초특가 할인
    2025년 9월 21일
  • 960원의 행복! 친환경 팽이버섯으로 식탁을 풍성하게
    960원의 행복! 친환경 팽이버섯으로 식탁을 풍성하게
    2025년 9월 21일
  • 12년 숙성의 깊은 맛! 감로이슬농원 산야초 발효 효소액으로 건강 충전!
    12년 숙성의 깊은 맛! 감로이슬농원 산야초 발효 효소액으로 건강 충전!
    2025년 9월 19일

You may have missed

우리 아이 첫 배변 훈련, 아이팜 이지두잉 유아변기로 시작하세요!
  • 쿠팡수입

우리 아이 첫 배변 훈련, 아이팜 이지두잉 유아변기로 시작하세요!

bizmark 2025년 10월 13일
불륜하다가 죽은 고향친구 장례식에 가야 하나요?
  • Issue

불륜하다가 죽은 고향친구 장례식에 가야 하나요?

bizmark 2025년 10월 13일
바람핀 아내에게 빌고 사는 남자
  • Issue

바람핀 아내에게 빌고 사는 남자

bizmark 2025년 10월 13일
축의금 50했는데, 30돌아옴
  • Issue

축의금 50했는데, 30돌아옴

bizmark 2025년 10월 12일
찌든 욕실 곰팡이, 유한락스 하나로 청소 끝! (내돈내산 후기)
  • 생활용품
  • 싱글라이프

찌든 욕실 곰팡이, 유한락스 하나로 청소 끝! (내돈내산 후기)

bizmark 2025년 10월 11일
cropped-bizmarkLogo2023.webp

최신 글

  • 우리 아이 첫 배변 훈련, 아이팜 이지두잉 유아변기로 시작하세요!
  • 불륜하다가 죽은 고향친구 장례식에 가야 하나요?
  • 바람핀 아내에게 빌고 사는 남자
  • Home
  • Issue
  • health
  • 생활/경제
  • shopping
Copyright © BIZMARK. All rights reserved. | AF themes의 CoverNews.