Patlang ng Pagpasok ng Teksto
Kolektahin ang teksto nang may katumpakan at kakayahang umangkop. Mula sa mga simpleng pangalan hanggang sa mga kumplikadong pattern na may built-in na pagpapatunay, matalinong pag-format, at mahusay na pagpapasadya – ang field ng Text Input ay umaangkop sa anumang pagkakataon ng paggamit na may mga limitasyon sa karakter, awtomatikong pag-format, at mga secure na mode ng password.
Ang Pundasyon ng Bawat WordPress Form
Perpekto para sa:
Mga Makapangyarihang Tampok para sa Bawat Gamit
📏 Matalinong Kontrol sa Haba
Minimum at Pinakamataas na Limitasyon ng Karakter
Itakda ang pinakamaikli at pinakamahabang pinapayagang mga entry ng teksto. Pigilan ang mga pagsusumite na masyadong maikli o masyadong mahaba gamit ang built-in na pagpapatunay ng browser.
Real-Time na Pagpapatunay
Makakakita agad ng feedback ang mga user kung ang kanilang entry ay hindi nakakatugon sa mga kinakailangan sa haba – walang sorpresa pagkatapos isumite.
Halimbawa:
- Pangalan ng Gumagamit: Minimum na 3, Max na 20 karakter
- Postal code: Minimum na 5, Max na 10 karakter
- Pangalan: Minimum na 2, Max na 50 karakter
- Komento: Maximum na 500 karakter
Bakit Mahalaga ito:
Kontrolin ang kalidad ng datos, pigilan ang spam, tiyakin ang pagiging tugma ng database, at gabayan ang mga gumagamit na magbigay ng tamang dami ng impormasyon.
✅ Mga Naka-embed na Pattern ng Pagpapatunay
6 na Paunang Na-configure na Uri ng Pagpapatunay:
- 1. Wala – Tanggapin ang anumang teksto (default)
2. Email – Pinapatunayan ang wastong format ng email ([protektado ng email])
3. URL – Nangangailangan ng mga wastong web address (https://example.com)
4. Mga Letra Lamang – Mga karakter at espasyong alpabeto lamang (John Doe)
5. Mga Numero Lamang – Mga numerong digit lamang (123456)
6. Alpanumero – Mga letra at numero, walang mga espesyal na karakter (User123)
Dagdag pa ang mga Pasadyang Disenyo:
- Tukuyin ang iyong sariling pagpapatunay ng regex para sa mga espesyal na format tulad ng:
- Mga plaka ng lisensya: `^[AZ]{3}[0-9]{4}$`
- Mga kodigo ng produkto: `^[AZ]{2}[0-9]{6}$`
- Mga pasadyang format na natatangi sa iyong negosyo
Instant Feedback:
Nakakakita ang mga user ng malinaw na mensahe ng error kung ang kanilang input ay hindi tumutugma sa kinakailangang format.
✂️ Awtomatikong Pagpuputol ng Puting Espasyo
Awtomatikong Linisin ang Data
Alisin ang mga hindi sinasadyang espasyo sa simula at dulo ng mga entry ng teksto. Hindi na "John" kapag kailangan mo ng "John".
Gumamit ng Mga Kaso:
- Mga email address (walang espasyo sa likod)
- Mga Username (walang espasyo sa unahan)
- Mga reference code (eksaktong tugma)
- Anumang larangan kung saan mahalaga ang katumpakan
Benepisyo:
Binabawasan ang mga error ng user, pinapabuti ang consistency ng data, pinipigilan ang mga isyu sa validation, at pinapasimple ang pagtutugma at paghahanap.
🔒 Paraan ng Password
Ligtas na Pagtakip sa Input
Gawing password ang anumang text field. Lumalabas ang mga karakter bilang mga tuldok (•••) upang protektahan ang sensitibong impormasyon mula sa mga gumagamit nito.
Perpekto Para sa:
- Mga entry sa password at PIN
- Mga security code at token
- Mga kumpidensyal na numero ng ID
- Mga two-factor authentication code
Matalinong Pag-uugali:
Awtomatikong hindi pinapagana ng password mode ang mga magkakasalungat na feature tulad ng text transformation at mga espesyal na uri ng input para matiyak ang seguridad.
📱 Mga Uri ng Smart Input
Na-optimize para sa Mobile at Desktop:
- Normal na Teksto – Karaniwang pag-input ng teksto para sa pangkalahatang paggamit
- Paghahanap – May kasamang built-in na clear button (X) para sa mabilis na pag-reset
- Telepono – Nagti-trigger ng numeric keypad sa mga mobile device para sa mas madaling pagpasok ng numero ng telepono
- URL – Ipinapakita ang espesyal na mobile keyboard na may mga shortcut na .com, .org
Bakit Mahalaga ito:
Ang tamang uri ng pag-input ay nagpapabilis sa pagpasok ng data sa mobile, binabawasan ang mga error, at nagpapabuti sa karanasan ng user sa lahat ng device.
🎨 Awtomatikong Pagbabago ng Teksto
I-format ang Teksto Habang Nagta-type ang mga Gumagamit:
- Walang Pagbabago – Ang teksto ay nananatiling eksakto kung paano ito naipasok
- MALALAKING TITIK – Kino-convert ang lahat ng teksto sa malalaking titik (JOHN DOE)
- maliliit na titik – Kino-convert ang lahat ng teksto sa maliliit na titik (john doe)
- Gamitin ang Malaking Titik sa Unang Titik – Unang titik lamang sa malaking titik (John doe)
- Kaso ng Pamagat – Unang Titik ng Bawat Salita (John Doe)
Perpekto Para sa:
- MALAKING TITIK: Mga plaka ng lisensya, mga kodigo ng estado, mga ID ng produkto
- maliliit na titik: Mga email address, mga username
- Gamitin sa malaking titik: Simula ng pangungusap, mga pangalang isahan
- Kaso ng Titulo: Mga buong pangalan, tirahan, titulo
Matalinong Pag-uugali:
Awtomatikong nangyayari ang pagbabago habang isinusumite ang impormasyon habang nakikita ng mga gumagamit ang kanilang orihinal na input.
🙈 Nakatagong Patlang na Mode
Mga Hindi Nakikitang Patlang ng Data
Gumawa ng mga field na hindi nakikita ng mga user ngunit magsumite ng data kasama ng form. Perpekto para sa pagsubaybay, mga referral code, at mga halaga ng system.
Gumamit ng Mga Kaso:
- Mga parameter ng pagsubaybay sa UTM
- Mga ID ng pinagmulan ng referral
- Mga numero ng bersyon ng form
- Mga pananda ng timestamp
- Nakatagong metadata
Paano Ito Works:
Itakda ang “Nakatagong Halaga” at awtomatiko itong isasama sa bawat pagsusumite ng form nang hindi nakakaabala sa UI ng iyong form.
🔀 Lohikang Kondisyonal
Dinamikong Pagtingin sa Patlang
Ipakita o itago ang mga text field batay sa iba pang mga value ng form. Gumawa ng mga matatalinong form na umaangkop sa input ng user.
Mga Panuntunan sa Advanced na Lohika:
- AT Lohika – Dapat matugunan ang lahat ng kundisyon
- Lohika ng O – Anumang kundisyon ay maaaring mag-trigger ng aksyon
- 8 Operator – Katumbas, Hindi katumbas, Mas malaki kaysa sa, Mas mababa sa, Naglalaman, Walang laman, at higit pa
Gumamit ng Mga Kaso:
- Ipakita lamang ang "Pangalan ng kumpanya" kapag ang uri ng gumagamit ay katumbas ng "Negosyo"
- Ipakita ang "Pinagmulan ng referral" kapag ang "Paano mo nalaman ang tungkol sa amin?" ay naglalaman ng "Referral"
- Itago ang "Iba pang mga detalye" kapag walang laman ang pangunahing opsyon
- Ipakita ang "Promo code" kapag ang halaga ng order ay higit sa $100
🎯 Pinahusay na Karanasan ng Gumagamit
Mga Nakapaloob na Matalinong Tampok:
- Mga Default na Halaga – Punan muna ang mga field para mapabilis ang pagkumpleto
- Teksto ng Placeholder – Magpakita ng mga kapaki-pakinabang na pahiwatig bago mag-type ang mga user
- Teksto ng Tulong – Magdagdag ng mga paglalarawan upang linawin kung ano ang ilalagay
- Kinakailangang Pagpapatunay – Gawing mandatory ang mga patlang na may malinaw na mga tagapagpahiwatig
- Mga Pasadyang Klase ng CSS – Maglagay ng pasadyang estilo upang tumugma sa iyong tatak
- Suporta sa Accessibility – Mga label ng ARIA para sa mga screen reader
- Na-optimize para sa Mobile – Mga input na madaling hawakan gamit ang mga angkop na keyboard
Simpleng Pag-setup sa 3 Hakbang
Ihanda ang iyong Text Input Field sa loob ng ilang minuto
Idagdag ang Patlang ng Teksto
I-drag at i-drop ang field ng Text Input mula sa seksyong Basic Fields papunta sa iyong form.
Magtakda ng Pagpapatunay at mga Limitasyon
Pumili ng uri ng pagpapatunay (email, URL, mga letra, atbp.), magtakda ng minimum/maximum na limitasyon sa karakter, at opsyonal na paganahin ang password mode o pag-trim ng whitespace.
I-configure ang Pag-format
Pumili ng uri ng input para sa mobile optimization, piliin ang text transformation (malalaking titik, maliliit na titik, atbp.), at magtakda ng mga default na value o placeholder.
🎉 Iyon lang! Handa na ang iyong text field gamit ang smart validation at formatting.
Mga Real-World Application
User Registration
* Mga patlang ng username na may mga limitasyon sa haba
* Mga input ng password na may masking
* Mga patlang ng pangalan na may format ng case at case ng pamagat
* Mga email address na may pagpapatunay
Makipag-ugnay sa Form
* Buong pangalan kasama ang mga detalye ng titulo
* Pagpapatunay ng email
* Mga numero ng telepono na may input ng tel
* Mga patlang para sa mensahe/komento
E-commerce
* Paglalagay ng promo code (malalaking titik)
* Mga patlang ng mensahe ng regalo
* Mga espesyal na tagubilin
* Mga tala sa pagpapadala
Mga Aplikasyon ng Negosyo
* Mga numero ng ID ng empleyado
* Mga pangalan ng departamento
* Mga numero ng sanggunian
* Mga panloob na kodigo
Mga Aplikasyon at Pagpaparehistro
* Mga numero ng lisensya
* Mga kodigo ng sertipikasyon
* Mga ID ng Pagiging Miyembro
* Mga pasadyang pantukoy
Paghahanap at Pagsala
* Pag-input ng paghahanap gamit ang buton na i-clear
* I-filter ang mga field ng teksto
* Mga entry ng keyword
* Mga input ng query
Kumpletong Mga Opsyon sa Patlang
Pangunahing Configuration
- Label ng Patlang – Ang pamagat na ipinapakita sa itaas ng patlang ng teksto
- Teksto ng Paglalarawan/Tulong – Karagdagang gabay para sa mga gumagamit
- Kinakailangang Patlang – Gawing mandatory ang pagpasok ng teksto
- Teksto ng Placeholder – Pahiwatig na teksto bago mag-type ang mga gumagamit
Pagpapatunay ng Haba
- Minimum na Haba – Pinakakaunting karakter na pinapayagan (pagpapatunay)
- Pinakamataas na Haba – Karamihan sa mga karakter na pinapayagan (mahigpit na limitasyon)
Mga Default na Halaga
- Default na Halaga – Paunang napunang teksto kapag naglo-load ang form
- Nakatagong Halaga – Halaga para sa mga nakatagong field (kapag pinagana ang nakatagong mode)
Seguridad at Pagkapribado
- Patlang ng Password – Itago ang input bilang password (ipinapakita ang mga tuldok •••)
Nakatagong Patlang – Gawing hindi nakikita ang patlang ngunit isama sa mga isinumite
Kalidad ng Data
Gupitin ang Puting Espasyo – Awtomatikong alisin ang mga sobrang espasyo mula sa simula at dulo
Mga Panuntunan sa Pagpapatunay
- Uri ng Pagpapatunay
- Wala (anumang teksto)
- Email ([protektado ng email])
- URL (https://example.com)
- Mga letra lamang (AZ lamang)
- Mga numero lamang (0-9 lamang)
- Alpanumero (AZ at 0-9)
- Pasadyang Pattern (regex)
- Pasadyang Pattern – Regular na expression para sa pasadyang pagpapatunay (kapag napili ang "Pasadyang")
Mga Uri ng Pag-input
- Uri ng input
- Normal na Teksto
- Maghanap (gamit ang buton na "clear")
- Telepono (numeric keypad sa mobile)
- URL (espesyal na mobile keyboard)
Pag-format ng Teksto
- Pagbabago ng Teksto
- Walang pagbabago
- UPPERCASE
- maliit na titik
- I-capitalize ang Unang Letra
- Kaso ng Pamagat
Makatarungang Lohika
- Paganahin ang Conditional Logic – Ipakita/itago batay sa mga kundisyon
- Uri ng lohika
- Dapat matugunan ang lahat ng mga kundisyon (AT)
- Maaaring matugunan ang anumang kundisyon (O)
- Mga Panuntunan sa Kondisyon
- Ipakita/Itago – Aksyon na gagawin
- Patlang – Aling patlang ang susuriin
- Operator – Katumbas ng, Hindi katumbas ng, Naglalaman ng, Mas malaki kaysa sa, Mas mababa sa, Walang laman, Hindi walang laman
- Halaga – Halaga ng paghahambing
- Maramihang Kundisyon – Magdagdag ng walang limitasyong mga panuntunan
Mga Advanced na Pagpipilian
- Mga Pasadyang Klase ng CSS – Maglapat ng pasadyang estilo
- Mga Katangian ng Accessibility – mga label at paglalarawan ng ARIA
Bakit Piliin ang Aming Text Input Field?
✅ Maraming gamit – Gumagana para sa mga pangalan, code, password, at lahat ng nasa pagitan
✅ Smart Validation – 6+ na pattern ng validation kasama ang custom regex
✅ Na-optimize para sa Mobile – Mga angkop na keyboard para sa bawat uri ng input
✅ Awtomatikong Pag-format – Awtomatikong nangyayari ang pagbabago ng teksto
✅ Ligtas – Pinoprotektahan ng password mode ang sensitibong impormasyon
✅ Malinis na Datos – Pinipigilan ng whitespace trimming ang mga karaniwang error
✅ Flexible – Mga nakatagong field, mga default na halaga, conditional logic
✅ Madaling Gamitin – Malinaw na mga mensahe ng pagpapatunay ang gagabay sa mga gumagamit
✅ Ganap na Pinagsama – Gumagana nang maayos sa lahat ng mga tampok ng form
Mga Madalas Itanong
T: Ano ang pagkakaiba sa pagitan ng minimum/max na haba at pagpapatunay?
Kinokontrol ng minimum/maximum na haba kung gaano karaming karakter ang pinapayagan. Kinokontrol naman ng pagpapatunay kung aling mga karakter ang pinapayagan, tulad ng mga letra lamang, mga numero lamang, o format ng email.
T: Maaari ko bang patunayan ang parehong haba AT format?
Oo. Pagsamahin ang minimum/max na haba sa mga panuntunan sa pagpapatunay. Halimbawa, itakda ang minimum 3, maximum 15, at alphanumeric validation para sa isang field ng username.
T: Paano gumagana ang password mode?
Tinatakpan ng password mode ang mga karakter na may mga tuldok, tulad ng mga karaniwang field ng password sa mga login screen.
T: Ano ang ginagawa ng "trim whitespace"?
Inaalis nito ang mga puwang sa unahan at hulihan bago ang pagsusumite upang hindi makasira sa pagpapatunay ang mga hindi sinasadyang puwang.
T: Maaari ba akong gumawa ng mga pasadyang pattern ng pagpapatunay?
Oo. Gamitin ang "Custom Pattern" at magdagdag ng regular expression para ipatupad ang anumang istrukturang kailangan mo.
T: Paano gumagana ang mga pagbabago ng teksto?
Karaniwang nagta-type ang user, at binabago ng system ang teksto kapag isinumite na, tulad ng pag-convert sa Title Letter o MALALAKING LETRA.
T: Para saan ang uri ng input sa paghahanap?
Nagdaragdag ito ng built-in na clear (X) button para agad na mai-reset ng mga user ang field habang naghahanap.
T: Bakit gagamit ng input type na “tel”?
Sa mobile, nagbubukas ito ng numeric keypad para mas mapadali ang paglalagay ng mga numerong katulad ng sa telepono.
T: Maaari ko bang gamitin ang conditional logic sa mga text field?
Oo. Ang mga kundisyong tulad ng "Naglalaman," "Katumbas," o "Walang laman" ay nagbibigay-daan sa iyong ipakita o itago ang mga field batay sa input ng user.
T: Para saan ginagamit ang mga nakatagong field?
Nag-iimbak ang mga ito ng data nang hindi nakikita ng user, na kapaki-pakinabang para sa pagsubaybay sa metadata tulad ng mga UTM tag o mga referral source.
T: Maaari bang gamitin ang mga text field para sa mga numero?
Oo, pero gamitin ang field na Number para sa kalkulasyon o numeric validation. Gamitin ang Text na may “Numbers only” kapag kailangan mo ng mga code o ID na hindi dapat ituring bilang mga numero.
T: Gaano katumpak ang mga regex pattern?
Kayang ipatupad ng Regex ang mga napakaespesipikong pattern. Gumamit ng regex tester kung kailangan mong bumuo o mag-verify ng mga kumplikadong pattern.
