Trang chủ » Blog » [Thực hành] Tạo form cơ bản- CodeGym.vn

[Thực hành] Tạo form cơ bản- CodeGym.vn

bởi CodeGym | 26/12/2023 17:17 | Bài thực hành | Blog

Mục đích

Luyện tập tạo form

Mô tả- Tạo form cơ bản

Tạo form như mẫu sau. Font chữ sử dụng trên form là: “Lucida Grande”,”Lucida Sans Unicode”, Tahoma, sans-serif.

Tạo form cơ bản

Để hoàn thành bài thực hành, học viên cần:

  • Đưa mã nguồn lên GitHub
  • Dán link của repository lên phần nộp bài trên CodeGymX

Hướng dẫn

Bước 1: Tạo file html đặt tên simpleform.html

Bước 2: Thêm thẻ <form> vào.

<body>
<form method="get" action="simpleform.html">

</form>
</body>

Bước 3: Thêm các phần tử vào form

Tạo tùy chọn với select … option

     <h2>Order Form</h2>
     <p>What would you like to buy?</p>
     <select>
         <option value = "  ">A</option>
         <option>B (+  0.5$)</option>
         <option>C (+  0.5$)</option>
     </select>

Tạo radio button

     <p>How many would you like to order?</p>
     <input type="radio" name="rd"/> 1 - $10 <br/>
     <input type="radio" name="rd"/> 2 - $20 <br/>
     <input type="radio" name="rd"/> 3 - $25 <br/>

Tạo textfield

     <p>Name <span style="color: red">*</span> </p>
     <input type = "text" name="firstname" placeholder="FirstName" size="15"/>
     <input type = "text" name="lastname" placeholder="LastName" size="15"/>
     <p>Email</p>
     <input type = "text" name="email" size="35"/>
     <p>Phone Number</p>
     <input type = "text" name="phone1" size="5"/> -
     <input type = "text" name="phone2" size="5"/> -
     <input type = "text" name="phone3" size="5"/>

Tạo button

     <p><input type = "button" name="btSubmit" value="Submit"/></p>

Bước 4: Tạo style về font chữ áp dụng toàn bộ form

 <style>
     .wufoo {
         font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
     }
 </style>

Sử dụng style vừa tạo:

<form method="get" action="simpleform.html" class = ".wufoo">

Bước 5: Mở file simpleform.html bằng trình duyệt. Quan sát kết quả.

Trong bài thực hành này chúng ta đã luyện tập tạo form với các phần tử cơ bản text, button, radio, select. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!

Xem thêm: Trở thành Kỹ sư cầu nối, lương trên 1000$/tháng chỉ sau 4 tháng học lập trình

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

7 + 9 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM