{"id":14630,"date":"2021-09-07T06:18:25","date_gmt":"2021-09-07T06:18:25","guid":{"rendered":"https:\/\/freehost.page\/?p=14630"},"modified":"2021-09-07T06:18:25","modified_gmt":"2021-09-07T06:18:25","slug":"can-giua-form-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/can-giua-form-trong-css\/","title":{"rendered":"C\u0103n gi\u1eefa Form trong CSS"},"content":{"rendered":"\n

M\u1ea5y h\u00f4m tr\u01b0\u1edbc khi t\u00f4i vi\u1ebft b\u00e0i v\u1ec1 c\u0103n gi\u1eefa v\u0103n b\u1ea3n trong CSS<\/a>, \u0111\u1ecbnh t\u00edch h\u1ee3p lu\u00f4n ph\u1ea7n n\u00e0y v\u00e0o, v\u00ec input<\/code> v\u00e0 button<\/code> th\u01b0\u1eddng c\u0169ng g\u1ed3m v\u0103n b\u1ea3n lu\u00f4n, kh\u00f4ng hi\u1ebfm tr\u01b0\u1eddng h\u1ee3p ph\u1ea3i c\u0103n gi\u1eefa, \u0111\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c giao di\u1ec7n d\u00e0nh ri\u00eang cho t\u00ecm ki\u1ebfm, ho\u1eb7c search bar chi\u1ebfm v\u1ecb tr\u00ed quan tr\u1ecdng tr\u00ean website.<\/p>\n\n\n\n

Tuy nhi\u00ean ngh\u0129 l\u1ea1i th\u00ec t\u00e1ch ra h\u1ee3p l\u00fd h\u01a1n, \u0111i\u1ec1u \u0111\u1ea7u ti\u00ean l\u00e0 v\u00ec form d\u00f9 bao g\u1ed3m ch\u1eef, nh\u01b0ng n\u00f3 kh\u00e1c nhi\u1ec1u c\u00e1c th\u1ebb bao ch\u1eef kh\u00e1c nh\u01b0 a, p, h, ul li, ol li. C\u1ee5 th\u1ec3 form c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n h\u01a1n, b\u1ea3n th\u00e2n n\u00f3 l\u00e0 m\u1ed9t, v\u00e0 th\u01b0\u1eddng l\u00e0 hai th\u00e0nh ph\u1ea7n kh\u00e1c n\u1eefa n\u1eb1m b\u00ean trong l\u00e0 input nh\u1eadp li\u1ec7u \u0111\u1ea7u v\u00e0o v\u00e0 n\u00fat b\u1ea5m \u0111\u1ec3 chuy\u1ec3n sang ph\u1ea7n k\u1ebft qu\u1ea3 t\u00ecm ki\u1ebfm.<\/p>\n\n\n\n

D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t m\u1eabu form c\u01a1 b\u1ea3n, \u0111\u01a1n gi\u1ea3n, ch\u01b0a \u0111\u01b0a ra b\u1ea5t c\u1ee9 ch\u1ec9 th\u1ecb CSS n\u00e0o, ngo\u1ea1i tr\u1eeb box div bao b\u00ean ngo\u00e0i- kh\u00f4ng ph\u1ea3i l\u00e0 th\u00e0nh ph\u1ea7n thu\u1ed9c v\u1ec1 form:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n         div#bigBox {width:800px; \n                     height:300px; \n                     border:1px solid black; }\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n            <form id=\"seForm\" action=\"\">        \n              <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n              <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n            <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
K\u1ebft qu\u1ea3: form c\u01b0 x\u1eed nh\u01b0 v\u0103n b\u1ea3n thu\u1ea7n, b\u00e1m v\u00e0o b\u00ean tr\u00e1i tr\u00ean c\u00f9ng v\u00e0 kh\u00f4ng c\u00f3 l\u1ec1, \u0111\u1ec7m. C\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a form c\u00f3 thu\u1ed9c t\u00ednh display<\/a> nh\u01b0 inline<\/code> ho\u1eb7c inline-block<\/code> v\u1eady, n\u00f3 x\u1ebfp tr\u00ean c\u00f9ng d\u00f2ng. Ki\u1ec3m tra l\u1ea1i th\u00ec m\u1ecdi ng\u01b0\u1eddi n\u00f3i r\u1eb1ng \u0111a s\u1ed1 tr\u00ecnh duy\u1ec7t xem input, button l\u00e0 inline-block<\/code> c\u00f2n form th\u00ec l\u00e0 block<\/code>. V\u00ed d\u1ee5 2 form d\u01b0\u1edbi \u0111\u00e2y kh\u00f4ng c\u00f2n x\u1ebfp c\u00f9ng d\u00f2ng n\u1eefa:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n           <form id=\"seForm\" action=\"\">        \n             <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n             <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n           <\/form> \n            \n           <form id=\"seForm2\" action=\"\">        \n              <input type=\"text\" id=\"seInput2\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o 2\">\n              <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm 2\" id=\"seButton2\">\n           <\/form> \n        <\/div>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Khi t\u00f4i th\u1eed thi\u1ebft l\u1eadp vi\u1ec1n, width cho form \u0111\u1ec3 n\u00f3 d\u1ec5 nh\u00ecn h\u01a1n, k\u1ebft qu\u1ea3 l\u00e0 n\u1ebfu form \u0111\u1ee7 r\u1ed9ng, n\u00f3 s\u1ebd v\u1eabn \u0111\u1ec3 input, button c\u00f9ng d\u00f2ng, n\u1ebfu thu h\u1eb9p l\u1ea1i, n\u00f3 s\u1ebd t\u1ef1 \u0111\u1ed9ng xu\u1ed1ng d\u00f2ng, gi\u1eefa input, button v\u00e0 form c\u0169ng kh\u00f4ng h\u1ec1 c\u00f3 l\u1ec1:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black;}\n            #seForm, #seForm2 {border: 1px solid black; margin-top:10px; width:300px;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                   <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                   <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n            \n             <form id=\"seForm2\" action=\"\">        \n                   <input type=\"text\" id=\"seInput2\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o 2\">\n                   <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm 2\" id=\"seButton2\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
B\u1eaft \u0111\u1ea7u th\u1ef1c hi\u1ec7n c\u0103n gi\u1eefa form<\/h2>\n\n\n\n
T\u00f4i t\u1ea1m th\u1eddi x\u00f3a c\u00e1i form th\u1ee9 hai \u0111i, \u0111\u1ec3 l\u1ea1i m\u1ed9t form cho d\u1ec5 quan s\u00e1t. <\/p>\n\n\n\n
a. N\u1ebfu form ch\u01b0a thi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng, c\u00e2u l\u1ec7nh text-align: center<\/code> c\u1ee7a th\u1ebb cha s\u1ebd gi\u00fap form c\u0103n gi\u1eefa trong box bao b\u00ean ngo\u00e0i (th\u1ebb div), c\u00f2n form l\u1ea5y \u0111\u1ed9 r\u1ed9ng lu\u00f4n c\u1ee7a box. V\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; text-align:center; }\n            #seForm {border: 1px solid black; margin-top:10px;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
b. N\u1ebfu form c\u00f3 \u0111\u1ed9 r\u1ed9ng c\u1ee5 th\u1ec3, th\u00ec c\u00e2u l\u1ec7nh tr\u00ean s\u1ebd c\u0103n gi\u1eefa input, button trong ch\u00ednh form ch\u1ee9 kh\u00f4ng ph\u1ea3i so v\u1edbi div n\u1eefa, v\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; text-align:center; }\n            #seForm {border: 1px solid black; margin-top:10px; width:300px;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
c. B\u1ecf text-align<\/code> c\u1ee7a div \u0111i, v\u00e0 chuy\u1ec3n l\u1ec7nh n\u00e0y xu\u1ed1ng ch\u00ednh form th\u00ec k\u1ebft qu\u1ea3 c\u0169ng t\u01b0\u01a1ng t\u1ef1, v\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; }\n            #seForm {border: 1px solid black; margin-top:10px; width:300px; text-align:center;  }\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
d. \u0110\u1ec3 v\u1eeba c\u0103n gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n trong form (input, button), v\u1eeba c\u0103n gi\u1eefa b\u1ea3n th\u00e2n form, ch\u00fang ta c\u1ea7n b\u1ed5 sung th\u00eam l\u1ec7nh margin: 0 auto<\/code> v\u00e0o CSS c\u1ee7a th\u1ebb form, v\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; }\n            #seForm {border: 1px solid black; margin-top:10px; width:300px;text-align:center; margin: 0 auto;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
e. Gi\u1edd l\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 n\u00fat t\u00ecm ki\u1ebfm t\u1ee5t xu\u1ed1ng d\u00f2ng, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m \u0111i\u1ec1u n\u00e0y d\u1ec5 d\u00e0ng b\u1eb1ng c\u00e1ch quy \u0111\u1ecbnh chi\u1ec1u r\u1ed9ng c\u1ee5 th\u1ec3 c\u1ee7a form, input, v\u00e0 button (nh\u01b0 \u0111\u00e3 n\u00f3i), \u0111\u1ec3 vi\u1ec7c x\u1ebfp c\u00f9ng d\u00f2ng s\u1ebd kh\u00f4ng th\u1ec3 th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c. C\u00e2u l\u1ec7nh v\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; }\n            #seForm {border: 1px solid black; margin-top:10px; width:300px; text-align:center; margin: 0 auto;}\n            #seInput {width:270px; }\n            #seButton {width:100px; }\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
f. N\u1ebfu b\u1ea1n mu\u1ed1n ngay c\u1ea3 khi form c\u00f3 k\u00edch c\u1ee1 \u0111\u1ee7 \u0111\u1ec3 input v\u00e0 button nh\u1ea3y l\u00ean c\u00f9ng d\u00f2ng nh\u01b0ng v\u1eabn x\u1ebfp kh\u00e1c d\u00f2ng th\u00ec c\u1ea7n chuy\u1ec3n display c\u1ee7a input v\u1ec1 d\u1ea1ng block<\/code> v\u00e0 th\u00eam margin: 0 auto<\/code> cho ch\u00ednh n\u00f3 \u0111\u1ec3 n\u00f3 t\u1ef1 c\u0103n gi\u1eefa trong form<\/code>. V\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; }\n            #seForm {border: 1px solid black; margin-top:10px; width:450px; text-align:center; margin: 0 auto;}\n            #seInput {display:block; margin: 0 auto; width:200px;}\n            #seButton {width:100px; }\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Ch\u1ec9 th\u1ecb CSS tr\u00ean kh\u00e1 hay v\u00ec n\u00f3 c\u00f3 nhi\u1ec1u l\u1edbp:<\/p>\n\n\n\n
  • margin: 0 auto<\/code> trong seForm<\/code> gi\u00fap n\u00f3 c\u0103n gi\u1eefa ch\u00ednh b\u1ea3n th\u00e2n n\u00f3 so v\u1edbi box div bao b\u00ean ngo\u00e0i;<\/li>
  • text-align: center<\/code> trong seFrom<\/code> gi\u00fap n\u00f3 c\u0103n gi\u1eefa \u0111\u01b0\u1ee3c button (display m\u1eb7c \u0111\u1ecbnh l\u00e0 inline-block) so v\u1edbi ch\u00ednh n\u00f3;<\/li>
  • display:block; margin: 0 auto;<\/code> trong seInput<\/code> gi\u00fap n\u00f3 c\u0103n gi\u1eefa ch\u00ednh n\u00f3 trong seForm<\/code> v\u00e0 ng\u1eaft d\u00f2ng so v\u1edbi button;<\/li><\/ul>\n\n\n\n
    g. \u0110\u1ec3 t\u1ea1o l\u1ec1 gi\u1eefa button v\u00e0 input, ch\u00fang ta ch\u1ec9 c\u1ea7n b\u1ed5 sung c\u00e2u l\u1ec7nh margin-top trong seButton, v\u00ec button l\u00e0 inline-block n\u00ean vi\u1ec7c thi\u1ebft l\u1eadp margin, padding th\u1ef1c hi\u1ec7n \u0111\u01b0\u1ee3c. C\u00e2u l\u1ec7nh v\u00ed d\u1ee5:<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n    <head>\n        <title>c\u0103n gi\u1eefa form<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#bigBox {width:800px; height:300px; border:1px solid black; }\n            #seForm {border: 1px solid black; margin-top:10px; width:450px; text-align:center; margin: 0 auto;}\n            #seInput {display:block; margin: 0 auto; width:200px;}\n            #seButton {width:100px; margin-top:20px;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"bigBox\">\n             <form id=\"seForm\" action=\"\">        \n                  <input type=\"text\" id=\"seInput\" placeholder=\"M\u1eddi b\u1ea1n nh\u1eadp v\u00e0o\">\n                  <input type=\"submit\" value=\"T\u00ecm ki\u1ebfm\" id=\"seButton\">\n             <\/form> \n        <\/div>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    T\u1ed5ng k\u1ebft<\/h2>\n\n\n\n
    C\u0103n gi\u1eefa form kh\u00f4ng ph\u1ee9c t\u1ea1p khi ch\u00fang ta n\u1eafm r\u00f5 tr\u1ea1ng th\u00e1i display m\u1eb7c \u0111\u1ecbnh c\u1ee7a t\u1eebng th\u00e0nh ph\u1ea7n. Form l\u00e0 block, c\u00f2n input v\u00e0 button l\u00e0 inline block;<\/p>\n\n\n\n
    S\u1eed d\u1ee5ng margin: 0 auto<\/code> \u0111\u1ec3 t\u1ef1 c\u0103n gi\u1eefa m\u1ed9t th\u00e0nh ph\u1ea7n block so v\u1edbi th\u1ebb bao ngo\u00e0i n\u00f3, c\u00e1i n\u00e0y th\u00ec \u0111\u00fang ph\u1ed5 qu\u00e1t ch\u1ee9 kh\u00f4ng ri\u00eang g\u00ec form.<\/p>\n\n\n\n
    S\u1eed d\u1ee5ng text-align: center<\/code> \u0111\u1ec3 c\u0103n gi\u1eefa th\u00e0nh ph\u1ea7n inline-block n\u1eb1m trong m\u1ed9t th\u1ebb.<\/p>\n\n\n\n
    Linh ho\u1ea1t chuy\u1ec3n \u0111\u1ed5i tr\u1ea1ng th\u00e1i display \u0111\u1ec3 ng\u1eaft d\u00f2ng ho\u1eb7c\/v\u00e0 c\u0103n gi\u1eefa khi c\u1ea7n thi\u1ebft.<\/p>\n\n\n\n
    Thi\u1ebft l\u1eadp \u0111\u1ed9 r\u1ed9ng c\u1ee7a form gi\u00fap \u00edch cho vi\u1ec7c ng\u1eaft d\u00f2ng khi c\u1ea7n.<\/p>\n","protected":false},"excerpt":{"rendered":"
    M\u1ea5y h\u00f4m tr\u01b0\u1edbc khi t\u00f4i vi\u1ebft b\u00e0i v\u1ec1 c\u0103n gi\u1eefa v\u0103n b\u1ea3n trong CSS, \u0111\u1ecbnh t\u00edch h\u1ee3p lu\u00f4n ph\u1ea7n n\u00e0y v\u00e0o, v\u00ec input v\u00e0 button th\u01b0\u1eddng c\u0169ng g\u1ed3m v\u0103n b\u1ea3n lu\u00f4n, kh\u00f4ng hi\u1ebfm tr\u01b0\u1eddng h\u1ee3p ph\u1ea3i c\u0103n gi\u1eefa, \u0111\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c giao di\u1ec7n d\u00e0nh ri\u00eang cho t\u00ecm ki\u1ebfm, ho\u1eb7c search bar chi\u1ebfm v\u1ecb tr\u00ed …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u0103n gi\u1eefa Form trong CSS • Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/can-giua-form-trong-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u0103n gi\u1eefa Form trong CSS • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"M\u1ea5y h\u00f4m tr\u01b0\u1edbc khi t\u00f4i vi\u1ebft b\u00e0i v\u1ec1 c\u0103n gi\u1eefa v\u0103n b\u1ea3n trong CSS, \u0111\u1ecbnh t\u00edch h\u1ee3p lu\u00f4n ph\u1ea7n n\u00e0y v\u00e0o, v\u00ec input v\u00e0 button th\u01b0\u1eddng c\u0169ng g\u1ed3m v\u0103n b\u1ea3n lu\u00f4n, kh\u00f4ng hi\u1ebfm tr\u01b0\u1eddng h\u1ee3p ph\u1ea3i c\u0103n gi\u1eefa, \u0111\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c giao di\u1ec7n d\u00e0nh ri\u00eang cho t\u00ecm ki\u1ebfm, ho\u1eb7c search bar chi\u1ebfm v\u1ecb tr\u00ed …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/can-giua-form-trong-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-07T06:18:25+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u0103n gi\u1eefa Form trong CSS • Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/can-giua-form-trong-css\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u0103n gi\u1eefa Form trong CSS • Ki\u1ebfn c\u00e0ng","og_description":"M\u1ea5y h\u00f4m tr\u01b0\u1edbc khi t\u00f4i vi\u1ebft b\u00e0i v\u1ec1 c\u0103n gi\u1eefa v\u0103n b\u1ea3n trong CSS, \u0111\u1ecbnh t\u00edch h\u1ee3p lu\u00f4n ph\u1ea7n n\u00e0y v\u00e0o, v\u00ec input v\u00e0 button th\u01b0\u1eddng c\u0169ng g\u1ed3m v\u0103n b\u1ea3n lu\u00f4n, kh\u00f4ng hi\u1ebfm tr\u01b0\u1eddng h\u1ee3p ph\u1ea3i c\u0103n gi\u1eefa, \u0111\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c giao di\u1ec7n d\u00e0nh ri\u00eang cho t\u00ecm ki\u1ebfm, ho\u1eb7c search bar chi\u1ebfm v\u1ecb tr\u00ed …","og_url":"https:\/\/kiencang.net\/can-giua-form-trong-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-07T06:18:25+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/can-giua-form-trong-css\/","url":"https:\/\/kiencang.net\/can-giua-form-trong-css\/","name":"C\u0103n gi\u1eefa Form trong CSS • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-07T06:18:25+00:00","dateModified":"2021-09-07T06:18:25+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/can-giua-form-trong-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/can-giua-form-trong-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/can-giua-form-trong-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u0103n gi\u1eefa Form trong CSS"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14630"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14630"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14630\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}