hoặc: https://bca001421836e318f942daad33b99f2d19905a3a.googledrive.com/host/0B2auljPt4_56fi1MdDJqM1ZKbE9saUtWV2VpeWRVY2JTSGlxcUg1NTE0SDZrSWRZcmR1RGM/form/
*Các câu lệnh dc viết trong thẻ: <form></form>
khi ta chèn 1 cái action bên trong thẻ form đầu
VD: <form action=''></form>
action này sẽ thực hiện hành động đưa ta tới 1 trang web nào đó mà chúng ta muốn
Câu lệnh: placeholder giúp chúng ta hiển thì gợi ý của form mà chúng ta ghi trong trường hợp người dùng k biết nên điền ntn vào đó.
Trong thẻ form chúng ta bằng đầu khai báo từ <input /> , trong thẻ input ta bắt đầu khai báo từ type,
type này tùy trường hợp mà tùy chỉnh
ví dụ: ô đầu tiên chúng ta muốn người dùng nhập tên thì ta sẽ để type là text( type="text")
còn ô thứ 2 ta muốn người dùng nhập email thì ta để type là email( type="email")
Mục đích của những cái này để làm gì?
Chúng dùng để mã hóa nội dung của thẻ đó, ví dụ bạn để type="email" thì nếu bạn viết khác định dạng email thì khi ấn submit nó báo lỗi ngay và bắt nhập lại.
Cuối cùng khi ta thực hiện xong các thẻ trong form mà muốn tạo 1 ô gửi đi hoặc là đăng nhập.... thì ta dùng type="submit"
code html:
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <link rel="stylesheet" href="css.css" type="text/css"> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action=""> <h1>Before you may cross the bridge, you must answer these questions </h1> What,is your Name? <br><input type="text" id="txtfullname" title="full name" placeholder="first last"/></br></br> What,is your email address? <br><input type="email" id="txtemail" title="email address" placeholder="email address"/></br></br> Email address again? <br><input type="email" id="txtaddress" title="email address" placeholder="confirm email address"/></br></br> What, is your phone number of your favorite pizza place? <br><input type="tel" id="txtphone" title="email address" placeholder="+84 xxx xxx xxx"/></br></br> What, is your date of birth? <br><input type="date" id="txtdateofbirth" title="email address" placeholder="dd/mm/yyyy"/></br></br> What, is your age <br><input type="number" id="txtage" title="email address" placeholder="age"/></br></br> What, is your favorite color? <br><input type="color" id="txtecolor" title="email address"/></br></br> What, is your kind favorite chocolate? <br><input type="text" id="txtkindchocolate" title="email address"/></br></br> What, is your part number of a 3/4" philips head machine screw? <br><input type="number" id="txtepartnumber" title="email address" placeholder="favorite website"/></br></br> What, is airspeed velocity of an unladen swallow? (m/s) <br><input type="range" id="txtairspeed" title="email address"/></br></br> <input type="submit" id="input" value="cross the bridge"/> </form> </body> </html>
code css:
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Apr 1, 2015, 2:15:54 PM
Author : Panda
*/
body{
height: 1000px;
width: 1000px;
background-color: #eeeeee;
}
#txtfullname,#txtaddress,#txtage,#txtairspeed,#txtdateofbirth,#txtecolor,#txtemail,#txtepartnumber,#txtkindchocolate,#txtphone{
width: 900px;
border: 1px solid #8cb38d;
border-radius: 5px;
}
#input{
width: 900px;
height: 30px;
background-color: #3477b0;
color: white;
border-radius: 5px;
}
Không có nhận xét nào:
Đăng nhận xét