Bây giờ chúng ta đã thấy làm thế nào để thêm các nút vào trang web của chúng tôi.
Trong bài tập này, chúng ta sẽ xem xét các biểu mẫu và làm thế nào chúng ta có thể thêm biểu mẫu vào
trang web của chúng tôi và cũng tạo kiểu các yếu tố biểu mẫu bằng cách sử dụng các lớp Bootstrap.
Quay trở lại trang contactus.html,
cuộn xuống cho đến khi bạn thấy nhận xét này có tên là “Biểu mẫu đi đây”.
Chúng tôi sẽ thay thế điều này bằng biểu mẫu trong trang web này.
Vì vậy, chúng ta hãy xóa điều đó và sau đó xây dựng
các hình thức ở vị trí cụ thể bên trong div có.
Để bắt đầu với các hình thức,
tôi sẽ sử dụng thẻ HTML mẫu và xây dựng các hình thức trong thẻ HTML này.
Vì vậy, trong thẻ hình thức này, chúng
ta hãy thêm vào các yếu tố bán kính của hình thức của chúng tôi.
Vì vậy, bên trong hình thức này,
tôi sẽ chia hình thức này thành nhiều hàng ở đó.
Để chia biểu mẫu của bạn thành hàng,
bạn có thể chỉ cần sử dụng một div với class="form-group” và sau đó áp dụng lớp hàng cho nó.
Vì vậy, với điều này, chúng ta sẽ thêm vào hai nhóm hình thức ở đây.
Tôi sẽ sao chép điều này và sau đó dán nó xuống dưới đây.
Vì vậy, bạn có thể thấy rằng tôi sẽ thêm hai hàng vào biểu mẫu này ở đây.
Vì vậy, để thêm một mục vào biểu mẫu này,
chúng tôi sẽ div này và sau đó tôi sẽ bắt đầu bằng cách sử dụng một thẻ nhãn ở đây.
Và đối với các thẻ nhãn,
vì vậy tôi sẽ có hai hàng;
một cho phép người dùng điền vào tên của họ,
và cái thứ hai cho họ.
Vì vậy, đây là nơi chúng ta sẽ sử dụng nhãn đó để xác định các lớp ở đó.
Bây giờ, Ngoài ra, Bootstrap cho phép chúng ta sử dụng lưới Bootstrap
để xác định làm thế nào các hình thức này sẽ được đặt ra quảng cáo vì vậy tôi sẽ áp dụng col-md-2.
Bạn có thể thấy rằng tôi đã áp dụng các lớp cột md-2 cho mục cụ thể này.
Vì vậy, mục này trong biểu mẫu sẽ chiếm hai cột.
Vì vậy, bên trong yếu tố hình thức này,
chúng tôi đã chia mỗi hàng thành 12 cột.
Vì vậy, bởi vì chúng tôi đã sử dụng hàng cho div,
do đó sẽ cung cấp cho chúng tôi với 12 cột bên trong div có.
Ngoài ra, tôi phải áp dụng nhãn mẫu col lớp này.
Vì vậy, đây là những gì cho phép tôi chỉ định một nhãn ở đây.
Vì vậy, đối với nhãn này,
tôi sẽ điền vào nhãn dưới dạng tên và sau đó đóng thẻ nhãn.
Vì vậy, thẻ nhãn này cho phép tôi đưa ra một nhãn,
mà sẽ chiếm hai cột bên trái trong hàng cụ thể này.
Ở phía bên phải, tôi sẽ sử dụng một div mà các lớp áp dụng như col-md-10.
Chú ý rằng nhãn trước đó đã sử dụng col-md-2 ở đó.
Vì vậy, đối với div này,
tôi sẽ áp dụng col-md-10 ở đó.
Và sau đó bên trong div này,
tôi sẽ áp dụng một yếu tố đầu vào,
đó là loại văn bản.
Vì vậy, nếu bạn đã quen thuộc với các hình thức từ HTML,
bạn sẽ thấy rằng chúng ta đang sử dụng các yếu tố hình thức từ HTML để
tạo ra hình thức ở đây để hộp đầu vào ở đây là của văn bản kiểu.
Bây giờ, đây là nơi chúng ta sẽ áp dụng các lớp Bootstrap này
và lớp Bootstrap tương ứng cho điều này
là điều khiển hình thức và sau đó tôi có thể chỉ định
một ID cho điều này như tên đầu tiên.
Vì vậy, lưu ý rằng ID này phù hợp với nhãn này cho div.
Vì vậy, tên đầu tiên, và sau đó tên như
tên đầu tiên và tôi cũng sẽ chỉ định
một giữ chỗ cho điều này để cho tôi sử dụng dòng tiếp theo ở đây,
giữ chỗ như, Tôi chắc chắn từ kiến thức của bạn về HTML,
bạn hiểu làm thế nào đặc điểm kỹ thuật này được thực hiện ở đây.
Vì vậy, với điều này, bây giờ chúng tôi đã tạo ra phần tử hình thức đầu tiên của chúng tôi trong hình thức của chúng tôi.
Chúng ta hãy xem nhanh trang web. Vào
trang web của chúng tôi, bây giờ bạn có thể thấy cách thêm vào các yếu tố biểu mẫu đã tạo ra
hộp văn bản đầu vào này và nhãn ở phía bên trái.
Bây giờ, tôi sẽ thêm vào hàng khác với họ.
Quay trở lại contactus.html của tôi,
hãy để tôi chỉ cần sao chép phần này và sau đó dán nó vào div thứ hai ở đây,
và sau đó đi vào và chỉnh sửa điều đó.
Từ tên tôi thay đổi nó thành họ.
Đảm bảo rằng bạn hoàn tất tất cả các chỉnh sửa một cách chính xác.
Ngay cả một thiếu chỉnh sửa không đúng cách,
sẽ làm cho hình thức của bạn không hoạt động chính xác vì vậy hãy chắc chắn rằng
tất cả những thứ tên đầu tiên ở đây được thay thế bằng tên cuối cùng của tôi.
Vì vậy, tên cuối cùng,
md-10 văn bản điều khiển.
ID ở đây phải là họ và tên cũng
phải là họ và giữ chỗ
lại tên cuối cùng vì vậy điều này sẽ thêm vào một hàng thứ hai với họ.
Đi đến trang web của bạn,
bạn có thể thấy bây giờ các hình thức
từ từ nhận được vào hình dạng để bạn có tên và họ.
Bây giờ, cho phép tiếp theo thêm vào một yếu tố đầu vào.
Chúng ta sẽ thấy cách thức hoạt động này khi chúng ta thêm vào mã.
Di chuyển bây giờ đến phần tiếp theo của bài tập,
ở đây chúng tôi sẽ thêm hai trường nữa vào
biểu mẫu của chúng tôi ở đây để nhập số điện thoại và ID email.
Kể từ khi cấu trúc cơ bản của mã là tương tự như
tên và tên cuối cùng mà bạn đã thêm vào biểu mẫu,
vì vậy tôi sẽ chỉ sao chép mã từ tên đầu tiên và
tên cuối cùng và sau đó dán nó vào đây và sau đó sửa đổi mã cho phù hợp.
Vì vậy, tôi đã dán mã từ tên và họ ở đây.
Hãy tiếp tục và bây giờ sửa đổi này để biến nó thành
các trường cho phép người dùng nhập số điện thoại và ID email.
Vì vậy, đối với số điện thoại,
vì vậy ở đây chúng tôi đã có tên và họ ở trên.
Vì vậy, thứ ba, tôi sẽ thay đổi này để nhãn cho “telnum”.
Vì vậy, đây là từ số điện thoại và sau đó các lớp học,
Tôi sẽ áp dụng một lớp col-12 này nói rằng nhãn này sẽ được
vẽ riêng của mình khi hình thức được hiển thị trên kích thước màn hình nhỏ đến nhỏ.
Và sau đó, cho kích thước màn hình trung bình đến cao hơn,
điều này sẽ được hiển thị trong hai cột
của hàng cụ thể ở đây để đó là sự thay đổi mà chúng tôi sẽ thực hiện ở đó.
Và sau đó, bản thân nhãn,
hãy để tôi thay đổi nó để liên lạc với số điện thoại, liên lạc với Tel.
Bây giờ, số điện thoại chính nó,
chúng tôi sẽ cho phép người dùng nhập nó như hai phần; một,
đó là mã vùng và số thứ hai,
đó sẽ là số điện thoại thực tế.
Vì vậy, tôi sẽ lấy phần này của mã,
đó là lĩnh vực đầu vào mà chúng tôi đã có cho
tên đầu tiên và sau đó tạo ra một cái khác dưới đây,
mà tôi sẽ sử dụng cho số điện thoại chính nó.
Và bây giờ chúng ta sẽ biến cái này đầu tiên vào trường để nhập mã vùng.
Bạn cũng có thể sử dụng nó ví dụ,
cho mã quốc gia nếu đó là những gì bạn muốn đặt trong biểu mẫu.
Vì vậy, đối với mã khu vực chính nó,
tôi sẽ áp dụng cho div,
các lớp="col-5 col-md-3 đây”.
Vì vậy, lưu ý rằng đối với màn hình trung bình,
chúng ta có hai cột bị chiếm bởi nhãn,
ba cột bị chiếm bởi mã
vùng và bảy cột còn lại tôi sẽ đưa nó vào trường văn bản ở đây.
Vì vậy, tương tự, đối với mã vùng tôi nói col năm.
Vì vậy, đối với màn hình nhỏ đến nhỏ, điều này sẽ chiếm
năm cột và sau đó cho bảy cột còn lại,
chúng tôi sẽ cho phép số điện thoại ăn chính nó chiếm đóng tại.
Vì vậy, để tôi thay đổi cái tiếp theo thành col-7 và col-md-7 ở đây.
Bây giờ, lĩnh vực này tôi sẽ thay đổi điều này để
tel, nhập loại tel cho số điện thoại và lớp là điều khiển hình thức,
ID là mã vùng và tên là mã vùng và sau đó giữ chỗ,
tôi sẽ thay đổi điều này để mã vùng.
Và phần tiếp theo,
chúng ta sẽ thay đổi điều này cũng gõ tel và ID là telnum,
tên là telnum và giữ chỗ,
chính nó, sẽ là số tel.
Vì vậy, điều này sẽ tạo thành trường số điện thoại
, sẽ được nhập dưới dạng hai
phần; mã vùng và số điện thoại.
Vì vậy, chúng tôi đang sử dụng, một lần nữa,
các lớp cột để cấu trúc
cách hai phần của trường đầu vào được hiển thị trong biểu mẫu ở đó.
Bây giờ cái cuối cùng, tất nhiên, nó
sẽ là cho email ID vì vậy nhãn,
tôi biến nó thành email ID và sau đó nhãn chính nó
là email và loại đầu vào là email.
Bây giờ, chúng ta thay đổi loại để email,
được cho phép trong HTML để sau này nếu chúng ta cần phải làm xác nhận hình thức,
sau đó chúng ta biết rằng lĩnh vực này nên
chỉ chứa một loại email của mục nhập đó, và ID
, chính nó, email ID và tên email ID và giữ chỗ.
Email. Đó là nó.
Hãy lưu các thay đổi và đi và xem biểu mẫu được cập nhật.
Đi đến biểu mẫu trong trình duyệt,
bây giờ bạn thấy hai hàng bổ sung được thêm vào biểu mẫu của chúng tôi.
Tên và họ được thêm vào trong phần trước của bài tập.
Vì vậy, ở đây, chúng tôi có số điện thoại liên lạc,
được chia thành mã vùng và số điện thoại.
Lưu ý cách chúng tôi đã sử dụng các lớp cột để định vị hai
trong biểu mẫu chính nó và sau đó là trường email ở đây.
Chúng ta hãy nhìn vào cùng một điều trên một kích thước màn hình nhỏ thêm.
Vì vậy, khi bạn đi đến một kích thước màn hình nhỏ thêm,
bạn sẽ nhận thấy cách biểu mẫu chính nó được đặt ra.
Bạn sẽ thấy rằng nhãn nằm ở trên cùng và sau đó là trường chính nó ở dưới cùng.
Vì vậy, tên, họ.
Lưu ý cách các
trường nhập số điện thoại liên hệ được định vị bằng cách sử dụng
các lớp cột, vì vậy mã vùng ở đây,
và số điện thoại,
và sau đó là ID email ở đây.
Bây giờ, chúng ta sẽ tiếp tục với bài tập.
Tiếp tục trong bước tiếp theo,
chúng tôi sẽ thêm vào một hộp kiểm và sau đó chúng tôi sẽ thêm vào một chọn hai hoặc bốn.
Để thêm một hộp kiểm, chúng ta
hãy chỉ cần sao chép nhóm hình thức này ở đây để chúng ta sẽ thêm nó như một hàng khác ở đây,
và sau đó thêm vào div nhóm hình thức ở đây,
và sau đó đóng div ở đây.
Và sau đó bên trong hàng nhóm hình thức này,
vì vậy điều này cho chúng ta thêm một hàng trong các hình thức.
Vì vậy, bên trong hàng nhóm biểu mẫu này,
hãy để tôi thêm vào đầu tiên hộp kiểm.
Vì vậy, để làm điều đó, chúng ta sẽ thêm vào một div với class="col-md-6"
vì vậy bạn sẽ thấy rằng điều này sẽ chiếm
sáu cột trong kích thước màn hình trung bình để thêm lớn,
và sau đó offset-md-2, vì vậy điều này sẽ bù đắp nó
bên phải bởi hai cột và sau đó hiển thị hộp kiểm ở đó.
Bây giờ, bên trong đây, để thêm một hộp kiểm,
chúng ta sẽ nói div với lớp = “form-check” và
bên trong lớp kiểm tra hình thức này, chúng ta sẽ thêm vào một kiểu đầu vào = “hộp kiểm”
và class="form-check input” và sau đó cho phép tôi đi đến dòng tiếp theo và sau đó
nói name="approve” và
id="approve” và giá trị là một chuỗi rỗng ở đó.
Và để hộp kiểm này,
chúng ta hãy thêm một nhãn.
Vì vậy, để thêm một nhãn,
chúng tôi sẽ đi và thêm vào nhãn
class="form-check label” và sau đó nhãn này
là cho hộp kiểm này mà chúng tôi vừa thêm vào.
Vì vậy, đó là lý do tại sao chúng tôi sẽ nói cho="phê duyệt” để lưu ý rằng đối với hộp kiểm,
chúng tôi đã cung cấp tên và ID như phê duyệt để đó là lý do tại sao ở đây,
chúng tôi sẽ lưu cho nhãn để phê duyệt.
Và sau đó bên trong nhãn này,
chúng tôi sẽ chỉ định nội dung là 'Chúng tôi có thể liên hệ với bạn không? '
Và sau đó lưu các thay đổi và chúng ta hãy đi và xem hình thức của chúng tôi.
Đi đến trang web,
bây giờ bạn có thể thấy rằng chúng tôi đã thêm vào một hộp kiểm cùng với một nhãn ở đây và nhận thấy
rằng nhãn này được in đậm vì việc sử dụng thẻ “mạnh” ở đó,
và chúng tôi đã làm offset-md-2.
Vì vậy, đó là lý do tại sao chúng tôi đẩy hộp kiểm này tất cả các cách ở đây.
Điều này không có một nhãn ở đây nhưng thay vào đó điều này được đẩy ngay ở đây, vì
vậy đó là lý do để sử dụng offset-md-2 ở đây,
và điều này chiếm md-6 nên sáu cột ở đây.
Chúng ta chưa xong việc với điều đó.
Tôi sẽ thêm vào phần tiếp theo ở đây,
đó là một hộp chọn ở đó.
Vì vậy, tôi sẽ áp dụng thêm một div ở đây với
class="col-md-3 offset-md-1" ở đây.
Và bên trong div này,
tôi sẽ xác định một lựa chọn.
Vì vậy, một lần nữa, từ kiến thức của bạn về HTML,
bạn biết những gì một lựa chọn làm cho bạn.
Bây giờ, chọn sẽ áp dụng
các lớp biểu mẫu điều khiển vì vậy đây là Bootstrap class mà tôi đang áp dụng để chọn ở đây,
và đóng tắt chọn.
Và bên trong đây, tôi cần phải đưa ra các tùy chọn cho việc chọn.
Vì vậy, tôi đang sử dụng một lựa chọn đơn giản ở đây,
và do đó, một trong những đầu tiên là một lựa chọn
cho điện thoại hoặc email và đóng tùy chọn.
Vì vậy, điều này tạo ra một yếu tố chọn trong biểu mẫu của tôi, trong
đó có hai tùy chọn;
điện thoại và email, vì vậy,
chúng ta hãy lưu các thay đổi.
Hãy xem trang web của chúng tôi,
bây giờ bạn có thể thấy cách hộp chọn điện thoại và email bây giờ được tạo ra ở đây vì vậy điều này
cho phép tôi chọn một trong những để làm và sau đó bạn cũng có thể kiểm tra hộp kiểm như thế này.
Vì vậy, điều này kết thúc hàng tiếp theo.
Hãy thêm vào một hàng nữa,
điều này sẽ cho phép người dùng thực sự gõ phản hồi của họ.
Vì vậy, tôi sẽ sử dụng một khu vực văn bản để định dạng đó.
Đối với kế tiếp, tôi sẽ sử dụng một khu vực văn bản.
Vì vậy, những gì tôi sẽ làm là tôi sẽ đi lên và sao chép phần email này của nó.
Tôi quá lười biếng để tiếp tục gõ tất cả mọi thứ mọi lúc.
Vì vậy, tôi có xu hướng cắt và dán bất cứ nơi nào khả thi, nhưng đối với cái này,
nhãn phải là phản hồi và nhãn dạng cột,
và sau đó văn bản thực tế là, “Phản hồi của bạn ở đây.”
Vì vậy, đó là nhãn hiệu.
Và sau đó, ở đây, cái thứ hai,
tôi sẽ định dạng cái này.
Thay vì loại đầu vào,
tôi sẽ thay đổi đó vào một khu vực văn bản,
và sau đó tôi không cần loại ở đó.
Khu vực văn bản, lớp học vẫn là điều khiển biểu mẫu và ID là phản hồi.
Tên là phản hồi và chỗ dành sẵn không cần thiết
ở đây và thay vào đó thay vào đó thay đổi nó thành bao nhiêu hàng tôi
muốn đưa ra từ phản hồi cho khu vực văn bản?
Vì vậy, tôi sẽ nói 12 hàng và sau đó đóng văn bản.
Vì vậy, hãy lưu ý làm thế nào tôi đã bao gồm textarea trong hình thức của tôi.
Lưu các thay đổi.
Hãy nhìn xem. Đi đến trang web của tôi,
bây giờ bạn thấy biểu mẫu của tôi có hình dạng hoàn chỉnh của nó ở đây.
Bạn có tên, họ,
điện thoại, email ở đó, và sau đó là phản hồi.
Vùng văn bản của 12 hàng.
Bây giờ, bạn sẽ cần một nút mà người dùng nên nhấp vào để gửi phản hồi của họ.
Vì vậy, cho phép thêm vào một nút gửi vào biểu mẫu này.
Quay trở lại biểu mẫu một lần nữa,
tạo thêm một hàng ở đây bằng cách sử dụng
div ở đây với hàng nhóm hình thức ở đây,
và bên trong đây tôi sẽ thêm vào một nút ở đây.
Vì vậy, tôi sẽ nói, div
class="offset-md-2" bởi vì tôi muốn nút của tôi được
đặt ngay dưới tất cả những lĩnh vực mà tôi
có ở đây để hai cột bên trái đang được sử dụng cho nhãn.
Vì vậy, nút gửi không cần một nhãn vì vậy tôi chỉ cần đẩy
nó sang bên phải ở đây và sau đó tôi sẽ
nói “col-md-10" vì vậy điều này sẽ chiếm 10 cột còn lại ở đó.
Và sau đó bên trong những div,
tôi sẽ thêm vào một nút ở đó.
Vì vậy, khi bạn thêm vào một nút vào biểu mẫu của bạn,
sử dụng thẻ nút ở đây với một loại gửi.
Vì vậy, đây là nút gửi cho biểu mẫu của bạn ở đó và lớp học.
Ghi các lớp nút, nút chính,
vì vậy điều này sẽ tạo ra một nút màu xanh đậm trong biểu mẫu của bạn và
sau đó đóng nút ở đó,
và sau đó tôi sẽ chỉ đơn giản là đi vào và bên trong nút,
tôi sẽ cung cấp cho tên là “Gửi phản hồi” và sau đó lưu các thay đổi.
Bây giờ, hình thức của chúng tôi đã hoàn thành.
Vì vậy, chúng ta hãy nhìn vào phiên bản cuối cùng của hình thức của chúng tôi.
Vào trang web của chúng tôi,
bây giờ bạn có thể xem biểu mẫu đã hoàn thành.
Tất cả các lĩnh vực này chúng tôi đã thấy,
nút ở dưới cùng với từ ngữ “Gửi
phản hồi” và nút màu xanh đậm vì việc sử dụng nút “chính”.
Vì vậy, điều này hoàn thành biểu mẫu mà chúng tôi muốn tạo ra trong trang web của chúng tôi.
Với điều này, chúng tôi hoàn thành bài tập này,
nơi chúng tôi đã thấy làm thế nào chúng tôi có thể xây dựng một hình thức và bao gồm nó vào trang web của chúng tôi.
Bạn sẽ làm việc với các biểu mẫu trong một số
bài tập sau này bao gồm bài tập thứ hai của bạn.
Đây là thời điểm tốt để bạn thực hiện một bình luận tốt với các mẫu tin nhắn.