You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tổng hợp cú pháp tạo các Form Radiobox, Checkbox, TextArea trong HTML

Tổng hợp cú pháp tạo các Form Radiobox, Checkbox, TextArea trong HTML

Cùng tìm hiểu cách tạo ra những dạng Form khác trong HTML.

Xem thêm bài viết

Xin chào các bạn. Chúng ta lại quay lại với những bài học thú vị của thẻ Form rồi.  Ở những bài trước chúng ta đã học về Form nhập liệu đơn giản. Bài học này sẽ hướng dẫn bạn tạo ra một Form bá đạo hơn.

Những Form mà mình sắp giới thiệu sẽ giúp bạn có thể tạo ra những biểu mẫu tuyệt vời. Bạn đã biết đến thẻ Form trong HTML là một loại thẻ quyền lực. Hơn thế chúng còn đi kèm với thẻ Input đầy ma lực. Thế nên bộ đôi này bá đạo cũng là chuyện tất nhiên thôi. Hôm nay chúng ta sẽ học về các tạo Form của Radiobox, Checkbox và TextArea.

Tạo Form cùng control Radiobox

Ở bài viết trước mình đã giới thiệu đến các bạn control Radiobox. Hôm nay chúng ta sẽ được viết từ control Radiobox thành một thành phẩm hoàn chỉnh dành cho Radiobox. Thực tế thì loại Form này được sử dụng khá nhiều. Dù là kích thước ủa chúng khá nhỏ nhắn và không được bạn để ý đến nhiều cho lắm.

Cú pháp

<form name= “…” action= “ ” method= “…”>

            <input type= “radiobox” name= “…”/> Tên của Radiobox

            <input type= “radiobox” name= “…”/> Tên của Radiobox

            …

</form>

 

Về phần Input thì chắc là bạn đã biết là thuộc tính Name của thẻ Radiobox phải giống nhau. Tên của Radiobox là giúp bạn có được những chú thích cho những ô tròn mà bạn đã tạo. Mục đích là để người dùng hiểu và click chuột. Bạn có thể thêm chữ checked vào ô mà bạn muốn để mặc định là được đánh dấu sẵn. 

Ví dụ

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action="..." method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action=" " method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        <br/>
        <form name="form3" action=" " method="get">
            <input type="email" name="EMl1"/>
            <input type="tel" name="Tl1"/>
            <input type="radio" name="sex" value="male" checked/> Nam
            <input type="radio" name="sex" value="female"/> Nữ
            <input type="submit" name="Sbm2"/><br/>
            
            <textarea rows="3" cols="40">Hãy điền những yêu cầu mà bạn muốn khi đến một quán ăn lý tưởng của bạn. Chúng tôi sẽ tư vấn dựa trên những điều này.</textarea>
            <textarea rows="5" cols="80">Hãy nói về sở thích của bạn</textarea>
        </form>
        <br/>
        <form>
            <input type="radio" name="fruit" value="grape"/> Nho
            <input type="radio" name="fruit" value="banana"/> Chuối
            <input type="radio" name="fruit" value="apple" checked/> Táo
            <input type="radio" name="fruit" value="strawberry"/>Dâu
        </form>
    </body>

 Kết quả ví dụ

Tạo Form cùng control Checkbox

Chức năng của Checkbox khá giống với Radiobox. Nhưng Checkbox cho phép bạn nhiều ô trong cùng một chủ đề.

Cú pháp

<form name= “…” action= “ ” method= “…”>

            <input type= “checkbox” name= “…” value= “…” checked/> Tên của Checkbox

            <input type= “checkbox” name= “…” value= “…”/> Tên của Checkbox

            …

</form>

 

Bạn thấy phần cú pháp khá giống với Radiobox. Chỉ khác nhau ở chỗ là chúng ta có thêm thuộc tính Value để chứa giá trị của ô checkbox đó. Value của ô checkbox phải cùng tên với tên của Checkbox bạn ghi bên ngoài thẻ Input. Bạn muốn ô nào được đánh dấu ngay lần đầu tiên hiện lên cho người dùng thì bạn hãy để chữ checked ở dòng đó. Bạn có thể ghi nhiều chữ Checked để đánh dấu cho nhiều ô khác nhau.

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action="..." method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action="..." method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        <br/>
        <form name="form3" action="..." method="get">
            <input type="email" name="EMl1"/>
            <input type="tel" name="Tl1"/>
            <input type="radio" name="sex" value="male" checked/> Nam
            <input type="radio" name="sex" value="female"/> Nữ
            <input type="submit" name="Sbm2"/><br/>
            
            <textarea rows="3" cols="40">Hãy điền những yêu cầu mà bạn muốn khi đến một quán ăn lý tưởng của bạn. Chúng tôi sẽ tư vấn dựa trên những điều này.</textarea>
            <textarea rows="5" cols="80">Hãy nói về sở thích của bạn</textarea>
        </form>
        <br/>
        <form>
            <input type="radio" name="fruit" value="grape"/> Nho
            <input type="radio" name="fruit" value="banana"/> Chuối
            <input type="radio" name="fruit" value="apple" checked/> Táo
            <input type="radio" name="fruit" value="strawberry"/>Dâu
        </form>
        <br/>
        <form>
            <input type="checkbox" name="food" value="cake"/> Bánh kem
            <input type="checkbox" name="food" value="pho"/> Phở
            <input type="checkbox" name="food" value="padthai" checked/>Pad Thái
            <input type="checkbox" name="food" value="sushi"/> Sushi
            <input type="checkbox" name="food" value="comnam"/> Cơm nắm
            <input type="checkbox" name="food" value="macaroon"/> Macaroon
        </form>
    </body>

Kết quả ví dụ

Lưu ý là bạn phải ghi là Checkbox chứ không thể ghi tắt giống như loại Radiobox có thể ghi là "radio" hoặc loại Textbox có thể ghi là "text".

Đưa TextArea vào Form

Chúng ta đã học về TextArea. Hôm nay chúng ta áp dụng vào Form.

Cú pháp:

<form name= “…” action= “ ” method= “…”>

            <textarea rows= “…” cols= “…”>

Content

            </textarea>

</form>

 

Khá đơn giản nhỉ? Bây giờ chúng ta sẽ cùng xem qua ví dụ nhé!

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action="..." method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action="..." method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        <br/>
        <form name="form3" action="..." method="get">
            <input type="email" name="EMl1"/>
            <input type="tel" name="Tl1"/>
            <input type="radio" name="sex" value="male" checked/> Nam
            <input type="radio" name="sex" value="female"/> Nữ
            <input type="submit" name="Sbm2"/><br/>
            
            <textarea rows="3" cols="40">Hãy điền những yêu cầu mà bạn muốn khi đến một quán ăn lý tưởng của bạn. Chúng tôi sẽ tư vấn dựa trên những điều này.</textarea>
            <textarea rows="5" cols="80">Hãy nói về sở thích của bạn</textarea>
        </form>
        <br/>
       <form>
           
       </form>
    </body>

Kết quả ví dụ

Chúng ta đã học qua cả 3 kiểu Form thông dụng. Hiện chúng ta chỉ còn đúng 1 Form nữa là có thể hoàn thành được phần tạo Form. Cố lên nhé! Bài tập của bạn ở bên dưới. Chúc bạn học vui!




Đặt câu hỏi cho bài viết này ?