본문 바로가기
스파르타/Web

[Web] 숙제 - ( week 1)

by bakcoding_sparta 2023. 4. 9.

 

현재 페이지에서 예시를 보고 요소를 추가하기

부트스트랩 form

 

1. Form 선택

부트스트랩에서 사용할 요소의 코드를 가져온다. 예시를 보면 '별점'이라는 설명과 드롭다운이 같이 있으므로 형식에 맞는 코드를 찾아서 사용한다.

 

드롭다운 요소의 위치는 URL과 Comments 입력칸 사이이다.

코드를 넣어주고 별점에 대한 정보를 넣어준다.

 

        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">Movie URL</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">Rating</label>
            <select class="form-select" id="inputGroupSelect01">
              <option selected>-- Select --</option>
              <option value="1"></option>
              <option value="2">⭐⭐</option>
              <option value="3">⭐⭐⭐</option>
            </select>
          </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">Comments</label>
        </div>

 

 

완성

'스파르타 > Web' 카테고리의 다른 글

[Web] JQuery - ( week 2)  (0) 2023.04.18
[Web] JavaScript - ( week 2)  (1) 2023.04.18
[Web] 배포하기 - ( week 1 )  (0) 2023.04.09
[Web] 부트스트랩 활용 - ( week 1 )  (0) 2023.04.09
[Web] Spartapedia - ( week 1 )  (0) 2023.04.07