Tạo khung cho form html

Nào giờ các bạn hãy thử thực hành nhé

Để tạo được biểu mẫu như hình trên các bạn cần tạo một bảng gồm 7 hàng và 2 cột. Hàng đầu tiên thì gộp 2 cột với nhau. Sau đó chèn các thẻ input vào các ô trong bảng.

Vì đây chỉ là ví dụ nên mình chỉ cho 1 vài giá trị vào để làm mẫu

Lưu ý: 

- Ở phần nhập giới tính, mình đặt thêm thuộc tính name="gioitinh" vào cả 2 mục nam và nữ là để người dùng chỉ được chọn 1 trong 2 giá trị. Nếu bạn khai báo name không giống nhau hoặc không thêm thuộc tính này thì người dùng sẽ chọn được cả 2 giá trị nam và nữ. Để hệ thống mặc định chọn giới tính nam thì bạn thêm thuộc tính checked="checked" vào mục nam nhé. 

- Ở phần textarea thì kích thước của khung được tính bằng số cột và số hàng. Sau này học đến phần CSS thì cũng không cần dùng thuộc tính này. Giờ làm thử thôi. hehehe.

Kết quả ta được như sau:

II. Iframe

Iframe là một khung nội tuyến được sử dụng trong một trang web để nhúng một tài liệu HTML khác vào bên trong nó. Ví dụ như video, ảnh, website khác ...

Iframe không trực tiếp tạo ra nội dung mà nó chứa nội dung HTML từ một nguồn khác.

Ví dụ: 

Ta được kết quả như sau: 

Trong ví dụ này là mình đã chèn một video từ nguồn nhaccuatui.com, nếu trang nhaccuatui xóa hoặc thay đổi đường link của video này thì khung Iframe sẽ không chạy video được nữa. 

Xin chào mọi người, trong bài viết này thì mình sẽ hướng dẫn các bạn làm form đăng kí bằng html và css. Chỉ với vài thuộc tính nhưng chúng ta đã tạo ra một tác phẩm rồi. Mình xin được bắt đầu bài viết.

Làm form đăng kí đơn giản bằng html css

Demo:

Các bạn có thể click vào đây để xem kết quả.

Bây giờ mình sẽ code và giải thích chi tiết ngay phía sau,trước tiên thì chúng ta sẽ tạo khung html :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Đăng kí

Các bạn có thể đổi cái div có class là form thành thẻ form thôi cũng được.

→Tham khảo ngay Tự học cắt web html css từ file thiết kế chuẩn w3c

Dưới đây là code css:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

*{

    margin:0;

    padding:0;

    border:none;

    font-family: 'Open Sans', sans-serif;

}

body {

    overflow: hidden;

    background-color: #ededed;

}

.to {

    display: grid;

    grid-template-columns: repeat[12,1fr];

    grid-template-rows: minmax[100px,auto];

}

.form {

    border: 1px solid #80808000;

    grid-column: 6/9;

    grid-row: 3;

    height: 470px;

    width: 292px;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    border-radius: 15px;

    box-shadow: 0px 0px 14px 0px grey;

    background-color: white;

}

h2 {

    margin-top: 50px;

    margin-bottom: 30px;

}

i.fab.fa-app-store-ios {

    display: block;

    margin-bottom: 50px;

    font-size: 28px;

}

label {

    margin-left: -126px;

    display: block;

    font-weight: lighter;

}

input{

    display: block;

    border-bottom: 2px solid #00BCD4;

    margin-top: 6px;

    margin-bottom: 10px;

    outline-style: none;

}

input[type="text"] {

    padding: 5px;

    width: 70%;

}

input#submit {

    padding: 7px;

    width: 50%;

    border-radius: 10px;

    border: none;

    position: absolute;

    bottom: 10px;

    cursor: pointer;

    background: linear-gradient[to right, #fc00ff, #00dbde];

}

input#submit:hover{

    background: linear-gradient[to right, #fc466b, #3f5efb];

}

Kết quả: 

Mình sẽ giải thích file css

• Đầu tiên chúng ta sẽ reset css
• Tiếp đến đặt màu background cho khối body
• Sử dụng thuộc tính display: grid để chia layout reponsive
• Tiếp đến chỉnh style cho form, cũng không có gì đặc biệt. Mình sử dụng thuộc tính display:flex chia các phần tử bên trong và đặt posttion:relative để căn chỉnh các thành phần cho hợp lý
• Tiếp theo là căn chỉnh style cho các thành phần còn lại bằng các thuộc tính thông thường.
• Cuối cùng là thêm cái hover cho nút submit cho có tí hiệu ứng 😀

Okê vậy là mình đã xử lý xong form đăng kí này chỉ bằng vài thuộc tính, cũng không có gì phức tạp đúng không. Mà trông nó nhìn cũng khá ngon đấy chứ :v. Các bạn có thể đặt lại bình luận dưới đây để yêu cầu mình làm những nội dung khác, mình sẽ làm hoàn toàn bằng html và css không cần sử dụng thêm framework nào khác :D.Mình xin được kết thúc bài viết tại đây.