콘텐츠로 건너뛰기
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>

지금 난리 난 다른 소식👉 32살 먹은 내가 자주 하는 상상

글 내비게이션

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

      잘 사용하렉요

댓글이 닫혔습니다.

쇼핑 리뷰

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

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

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

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

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

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

reporter 2026년 6월 30일
남자워킹화 까발로 코튼 CA004 직접 신어보니 이랬습니다
  • 여성 패션

남자워킹화 까발로 코튼 CA004 직접 신어보니 이랬습니다

reporter 2026년 6월 29일
예쁜원피스 찾는 분께 추천! 미야미 뜨왈 홈웨어 잠옷 직접 입어본 후기
  • 여성 패션

예쁜원피스 찾는 분께 추천! 미야미 뜨왈 홈웨어 잠옷 직접 입어본 후기

reporter 2026년 6월 28일

건강 정보

제로 콜라로 혈당 스파이크가 올 수 있다.
  • 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월 1일
세럼바르는순서 헷갈리는 피부 고민러에게 올인원 미스트 세럼
  • 뷰티

세럼바르는순서 헷갈리는 피부 고민러에게 올인원 미스트 세럼

reporter 2026년 6월 28일
바이오더마센시비오 쓰면서 정착한 비플레인 녹두 약산성 클렌징폼 후기
  • 뷰티

바이오더마센시비오 쓰면서 정착한 비플레인 녹두 약산성 클렌징폼 후기

reporter 2026년 6월 27일
피지연화제, 답 없던 코 블랙헤드 드디어 깔끔해진 후기
  • 뷰티

피지연화제, 답 없던 코 블랙헤드 드디어 깔끔해진 후기

reporter 2026년 6월 26일
끈적임 없이 촉촉한 수분썬크림? 에뛰드 순정 디렉터 선크림 솔직 후기
  • 뷰티

끈적임 없이 촉촉한 수분썬크림? 에뛰드 순정 디렉터 선크림 솔직 후기

reporter 2026년 6월 26일

You may have missed

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

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

reporter 2026년 7월 1일
레티놀세럼 이제 막 시작한다면 이것부터 보세요
  • 뷰티

레티놀세럼 이제 막 시작한다면 이것부터 보세요

reporter 2026년 7월 1일
대용량 페트병, 1.8리터 144개 빈병으로 넉넉하게 활용하는 살림 팁
  • 생활용품

대용량 페트병, 1.8리터 144개 빈병으로 넉넉하게 활용하는 살림 팁

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

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

reporter 2026년 6월 30일
철재선반 고민 끝! 무볼트 간편 조립으로 공간 활용 만렙 찍기
  • 생활용품

철재선반 고민 끝! 무볼트 간편 조립으로 공간 활용 만렙 찍기

reporter 2026년 6월 30일
cropped-bizmarkLogo2023.webp

최신 글

  • 끈없는브라, 여름 오프숄더 룩 자신감! 드디어 찾은 인생템 후기
  • 레티놀세럼 이제 막 시작한다면 이것부터 보세요
  • 대용량 페트병, 1.8리터 144개 빈병으로 넉넉하게 활용하는 살림 팁
  • Home
  • Issue
  • News
  • Health
  • IT infomation
  • Shopping
  • 가전디지털
  • 생활/경제
  • Contact
Copyright © BIZMARK. All rights reserved. | AF themes의 CoverNews.