콘텐츠로 건너뛰기
BIZMARK

BIZMARK

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

기본 메뉴 BIZMARK

BIZMARK

  • 실시간 이슈
    • IssueWe are posting hot issues and humor in Korea.
    • NewsKorean news with a lot of real-time views
    • Bitcoin
  • 헬스케어(HOT)
    • 건강 정보
    • 헬스/건강식품
    • 스포츠/레저
  • 스마트 가이드
    • IT infomationWindows, Linux, Mac, etc. PC usage tips are provided
    • 앱소개
    • MarketingOnline Marketing skills
  • 쇼핑 & 핫딜
    • ShoppingShopping Information on the latest and popular products
    • 생활용품
    • 여성 패션
  • 디지털 라이프
    • 가전디지털
    • 노트북
    • 태블릿PC
    • 키보드/마우스
  • 경제 & 재테크
    • 생활/경제
  • 문의하기
  • 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>

지금 난리 난 다른 소식👉 오메가3 핫딜소식 안내!

지금 난리 난 다른 소식👉 소문난 제품 인저누티 바운서 BEST 10

글 내비게이션

이전: 워드프레스 오류- 이 페이지에 접근할 권한이 없습니다.
다음: 모달 여러개 만들기(멀티모달)-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 오후

      잘 사용하렉요

댓글이 닫혔습니다.

쇼핑 리뷰

스트랩샌들힐, 설레는 발걸음을 위한 7cm 힐 코디 제안
  • 여성 패션

스트랩샌들힐, 설레는 발걸음을 위한 7cm 힐 코디 제안

reporter 2026년 7월 7일
40대하객룩, 이 트위드 쉬폰 원피스로 결혼식 고민 끝냈어요
  • 여성 패션

40대하객룩, 이 트위드 쉬폰 원피스로 결혼식 고민 끝냈어요

reporter 2026년 7월 4일
끈없는브라, 여름 오프숄더 룩 자신감! 드디어 찾은 인생템 후기
  • 여성 패션

끈없는브라, 여름 오프숄더 룩 자신감! 드디어 찾은 인생템 후기

reporter 2026년 7월 1일
여성등산바지 유목민 정착템 몽벨 롱 팬츠, 편안함은 기본 스타일까지 잡았어요
  • 여성 패션

여성등산바지 유목민 정착템 몽벨 롱 팬츠, 편안함은 기본 스타일까지 잡았어요

reporter 2026년 6월 30일
엘칸토 남성구두 GD80, 발볼 넓은 직장인도 편안하게 신는 비결
  • 여성 패션

엘칸토 남성구두 GD80, 발볼 넓은 직장인도 편안하게 신는 비결

reporter 2026년 6월 30일

건강 정보

제로 콜라로 혈당 스파이크가 올 수 있다.
  • health
  • Issue

제로 콜라로 혈당 스파이크가 올 수 있다.

bizmark 2026년 4월 5일
화병, 원인부터 치료까지 완벽 분석
  • health

화병, 원인부터 치료까지 완벽 분석

bizmark 2025년 6월 11일
오십견에 좋은 운동을 알려드려요.
  • Issue
  • health

오십견에 좋은 운동을 알려드려요.

bizmark 2025년 2월 20일
달걀 장조림을 이렇게 하면 영양소 손실 제로!
  • health

달걀 장조림을 이렇게 하면 영양소 손실 제로!

pathfinder 2025년 2월 12일

Beauty

초음파마사지기, 턱관절부터 발목까지 아픈 부위 다 쓸 수 있다고?
  • 뷰티

초음파마사지기, 턱관절부터 발목까지 아픈 부위 다 쓸 수 있다고?

reporter 2026년 7월 7일
거친 남자친구 입술? OBge 무드 체인지 립밤으로 바꿔줬더니
  • 뷰티

거친 남자친구 입술? OBge 무드 체인지 립밤으로 바꿔줬더니

reporter 2026년 7월 6일
PDT레이저, 오메가라이트 2세대 써보고 피부과 안 가는 이유
  • 뷰티

PDT레이저, 오메가라이트 2세대 써보고 피부과 안 가는 이유

reporter 2026년 7월 4일
무선미니고데기 유목민 정착템, 블라우풍트 컴팩트 이걸로 끝냈어요
  • 뷰티

무선미니고데기 유목민 정착템, 블라우풍트 컴팩트 이걸로 끝냈어요

reporter 2026년 7월 3일
아큼두 폴리쉬오일 헤어오일, 푸석한 머릿결에 윤기를 선물한 솔직 후기
  • 뷰티

아큼두 폴리쉬오일 헤어오일, 푸석한 머릿결에 윤기를 선물한 솔직 후기

reporter 2026년 7월 3일

You may have missed

핸드드립주전자 이걸로 바꿨더니 홈카페 만족도가 확 올랐어요
  • 생활용품

핸드드립주전자 이걸로 바꿨더니 홈카페 만족도가 확 올랐어요

reporter 2026년 7월 7일
보조금 정책 변화 전기차 시장 자구책과 부정 수급 방지 기술 도입
  • Issue

보조금 정책 변화 전기차 시장 자구책과 부정 수급 방지 기술 도입

reporter 2026년 7월 7일
초음파마사지기, 턱관절부터 발목까지 아픈 부위 다 쓸 수 있다고?
  • 뷰티

초음파마사지기, 턱관절부터 발목까지 아픈 부위 다 쓸 수 있다고?

reporter 2026년 7월 7일
스트랩샌들힐, 설레는 발걸음을 위한 7cm 힐 코디 제안
  • 여성 패션

스트랩샌들힐, 설레는 발걸음을 위한 7cm 힐 코디 제안

reporter 2026년 7월 7일
두산로보틱스 주가 급락 배경과 AI 로봇 시장 전략 분석
  • Issue

두산로보틱스 주가 급락 배경과 AI 로봇 시장 전략 분석

reporter 2026년 7월 7일
cropped-bizmarkLogo2023.webp

최신 글

  • 핸드드립주전자 이걸로 바꿨더니 홈카페 만족도가 확 올랐어요
  • 보조금 정책 변화 전기차 시장 자구책과 부정 수급 방지 기술 도입
  • 초음파마사지기, 턱관절부터 발목까지 아픈 부위 다 쓸 수 있다고?
  • Home
  • Issue
  • News
  • Health
  • IT infomation
  • Shopping
  • 가전디지털
  • 생활/경제
  • Contact
Copyright © BIZMARK. All rights reserved. | AF themes의 CoverNews.