English 中文(简体)
W3.CSS Tutorial

Selected Reading

W3.CSS - Forms
  • 时间：2025-02-05

W3.CSS - Forms

Previous Page Next Page  

W3.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used −

Sr. No. Class Name & Description
1

w3-group

Represents a bordered container. Can be used to group a label and input.
2

w3-input

Beautifies an input control.
3

w3-label

Beautifies a label.
4

w3-checkbox w3-checkmark

Beautify a checkbox/ radio button.

Example

w3css_forms.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
   </head>
   
   <body>
      <form class = "w3-container w3-card-8">
         <span class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </span>
         
         <span class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </span>
         
         <span class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </span>
         <span class = "w3-row">
            <span class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <span class = "w3-checkmark"></span> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <span class = "w3-checkmark"></span> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <span class = "w3-checkmark"></span> Don t know (Disabled)
               </label>
               <br>
               <br>
            </span>
            
            <span class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <span class = "w3-checkmark"></span> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <span class = "w3-checkmark"></span> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <span class = "w3-checkmark"></span> Don t know (Disabled)
               </label>
            </span>
         </span>
      </form>
   </body>
</html>

Result

Verify the result.