Jassif Team Institution

CSS Styling Forms

HTML படிவங்களை பாணியிட CSS பயன்படுத்தப்படுகிறது. ஒரு HTML படிவத்தின் தோற்றம் CSS உடன் பெரிதும் மேம்படுத்தப்படும்:

CSS உடன், உரை புலங்கள், கடவுச்சொல் புலங்கள், சரிபார்ப்புப் பெட்டிகள், ரேடியோ பொத்தான்கள் மற்றும் கோப்பு உள்ளீடுகள் போன்ற பெரும்பாலான வெவ்வேறு உள்ளீடு வகைகளைப் பாணியிடலாம். உள்ளீடு லேபிள்கள் மற்றும் படிவ பொத்தான்களையும் பாணியிடலாம்.

Styling Form Input Fields

உள்ளீடு புலங்களைப் பாணியிட பொதுவாகப் பயன்படுத்தப்படும் சில CSS பண்புகள்:

• width
• padding
• margin
• border
• border-radius
• background-color
• color
• font-size

Style Input Width

width பண்பு ஒரு உள்ளீடு புலத்தின் அகலத்தை அமைக்கப் பயன்படுகிறது.

இங்கே நாம் அகலத்தை 100% ஆக அமைக்கிறோம்:

Example

input {
  width: 100%;
}

மேலே உள்ள எடுத்துக்காட்டு அனைத்து <input> உறுப்புகளுக்கும் பொருந்தும். ஒரு குறிப்பிட்ட உள்ளீடு வகையை மட்டும் பாணியிட விரும்பினால், பண்பு தேர்வுகளைப் பயன்படுத்தலாம்:

• input[type=text] - உரை புலங்களை மட்டும் தேர்ந்தெடுக்கும்
• input[type=password] - கடவுச்சொல் புலங்களை மட்டும் தேர்ந்தெடுக்கும்
• input[type=number] - எண் புலங்களை மட்டும் தேர்ந்தெடுக்கும்
• முதலியன..

Style Input Padding

padding பண்பு உரை புலத்திற்குள் சில இடத்தைச் சேர்க்கப் பயன்படுகிறது.

Example

input[type=text] {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  box-sizing: border-box;
}

நாங்கள் box-sizing பண்பை border-box ஆக அமைத்துள்ளோம் என்பதைக் கவனிக்கவும். இது இடைவெளி மற்றும் இறுதியில் எல்லைகள் உறுப்புகளின் மொத்த அகலம் மற்றும் உயரத்தில் சேர்க்கப்பட்டுள்ளதை உறுதி செய்கிறது.

CSS Box Sizing அத்தியாயத்தில் box-sizing பண்பு பற்றி மேலும் அறிக.

Style Input Border

border பண்பு எல்லை அளவு மற்றும் வண்ணத்தை மாற்றப் பயன்படுகிறது, மேலும் border-radius பண்பு வட்டமான மூலைகளைச் சேர்க்கப் பயன்படுகிறது:

Example

input[type=text] {
  border: 2px solid red;
  border-radius: 8px;
}

கீழ் எல்லையை மட்டும் விரும்பினால், border-bottom பண்பைப் பயன்படுத்தவும்:

Example

input[type=text] {
  border: none;
  border-bottom: 1px solid red;
}

Style Input Background Color and Color

background-color பண்பு உள்ளீட்டிற்கு பின்னணி வண்ணத்தைச் சேர்க்கப் பயன்படுகிறது, மேலும் color பண்பு உரை வண்ணத்தை மாற்றப் பயன்படுகிறது:

Example

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Style Input with Focus

இயல்புநிலையாக, சில உலாவிகள் உள்ளீடு கவனத்தைப் பெறும் போது (கிளிக் செய்யப்படும் போது) உள்ளீட்டைச் சுற்றி ஒரு நீல அவுட்லைனைச் சேர்க்கும். outline: none; உள்ளீட்டில் சேர்ப்பதன் மூலம் இந்த நடத்தையை அகற்றலாம்.

உள்ளீடு புலம் கவனத்தைப் பெறும் போது ஏதாவது செய்ய :focus தேர்வாளைப் பயன்படுத்தவும்:

Example

input[type=text]:focus {
  background-color: lightblue;
}

input[type=text]:focus {
  border: 3px solid #555;
}

Style Input with icon/image

உள்ளீட்டிற்குள் ஒரு ஐகானை விரும்பினால், background-image பண்பைப் பயன்படுத்தவும் மற்றும் background-position பண்புடன் அதை நிலைநிறுத்தவும். ஐகானின் இடத்தை ஒதுக்கீடு செய்ய ஒரு பெரிய இடது இடைவெளியையும் சேர்க்கிறோம் என்பதைக் கவனிக்கவும்:

Example

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Animated Search Input

இந்த எடுத்துக்காட்டில், உள்ளீடு கவனத்தைப் பெறும் போது தேடல் உள்ளீட்டின் அகலத்தை அனிமேட் செய்ய CSS transition பண்பைப் பயன்படுத்துகிறோம். CSS Transitions அத்தியாயத்தில் பின்னர் transition பண்பு பற்றி மேலும் அறிந்து கொள்வீர்கள்.

Example

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

Style Textarea

இயல்புநிலையாக, ஒரு <textarea> கீழ் வலது மூலையில் உள்ள "grabber" உடன் மீண்டும் அளவிடப்படும். grabber ஐ அகற்ற, resize பண்பை none ஆக அமைக்கவும்:

Example

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Style a Dropdown Menu

Example

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Style Form Buttons

"button", "submit" மற்றும் "reset" வகையின் படிவ பொத்தான்களையும் CSS உடன் பாணியிடலாம்:

Example

input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */

CSS Responsive Form

பின்வரும் எடுத்துக்காட்டு பதிலளிக்கும் படிவத்தை உருவாக்க CSS media queries ஐப் பயன்படுத்துகிறது. பின்னர் ஒரு அத்தியாயத்தில் media queries பற்றி மேலும் அறிந்து கொள்வீர்கள்.

திரை 600px அகலத்தை விட சிறியதாக இருக்கும் போது, லேபிள்கள் மற்றும் உள்ளீடு புலங்களை ஒன்றுக்கு அடுத்து ஒன்றாக அடுக்குவதற்குப் பதிலாக ஒன்றின் மேல் ஒன்றாக அடுக்குகிறோம்.

படிவ லேஅவுட் மாறுவதைக் காண திரையின் அளவை மாற்றவும்!

Exercise

input[type=text] {
  ?;
}