콘텐츠로 건너뛰기
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월 1일
  • 층간소음 경고문
    층간소음 경고문
    2025년 9월 30일
  • 커트 비용이 11만원이나 하는 이유
    커트 비용이 11만원이나 하는 이유
    2025년 9월 30일

건강정보

  • 화병, 원인부터 치료까지 완벽 분석
    화병, 원인부터 치료까지 완벽 분석
    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월 6일
2080 오리지날 미세모 칫솔 10개입! 상쾌한 아침을 여는 선택
  • 생활용품

2080 오리지날 미세모 칫솔 10개입! 상쾌한 아침을 여는 선택

bizmark 2025년 10월 4일
7만명이 극찬! 크리오 초극세모 칫솔, 5900원 득템 찬스!
  • 생활용품

7만명이 극찬! 크리오 초극세모 칫솔, 5900원 득템 찬스!

bizmark 2025년 10월 4일
넉넉한 수납! 코멧 이불 케이스로 깔끔한 겨울옷 정리 끝!
  • 쿠팡수입

넉넉한 수납! 코멧 이불 케이스로 깔끔한 겨울옷 정리 끝!

bizmark 2025년 10월 3일
좁은 옷장 넓게 쓰는 법! 레디박스 옷정리함으로 깔끔하게!
  • 쿠팡수입

좁은 옷장 넓게 쓰는 법! 레디박스 옷정리함으로 깔끔하게!

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

최신 글

  • 우리 아기 꿀잠 보장! 하기스 네이처메이드 밴드 기저귀 특가
  • 2080 오리지날 미세모 칫솔 10개입! 상쾌한 아침을 여는 선택
  • 7만명이 극찬! 크리오 초극세모 칫솔, 5900원 득템 찬스!
  • Home
  • Issue
  • health
  • 생활/경제
  • shopping
Copyright © BIZMARK. All rights reserved. | AF themes의 CoverNews.