fbpx

Website Designing Course | Lesson 11 | How to create HTML Forms in Telugu

Website Designing Course | How to create HTML Forms in Telugu
Website Designing Course | How to create HTML Forms in Telugu
హాయ్, నమస్కారం ! మనం లాస్ట్ లెసన్స్ లో టేబుల్స్ ద్వారా వెబ్ లేఔట్స్ ఎలాక్రియేట్ చేయాలో, అలాగే టేబుల్స్ ఉపయోగించే విధానం, వాటిల్లో ఉండే attributes గురించి తెలుసుకున్నాం. ఈ లెసన్లో మనం లాగిన్ ఫార్మ్స్ HTML ద్వారా ఎలా క్రియేట్ చేయాలో తెలుసుకుందాం. HTML ఫార్మ్స్ అనేవి మనం అప్లికేషన్స్ కోసం, డాష్బోర్స్ వంటి వాటి కోసం మనం ఉపయోగిస్తాము.
Website Designing Course | How to create HTML Forms in Telugu
ఇది facebook వెబ్సైటు యొక్క హోమ్ పేజీ లో ఉండే, లాగిన్ ఫారం, సైన్  అప్  ఫార్మ్స్. ఈ లెసన్ లో లాగిన్ ఫారం  ఎలా క్రియేట్ చేయాలో తెలుసుకుందాం.
అందుకోసం నేను ఈ విధంగా కోడింగ్ వ్రాస్తున్నాను.
Website Designing Course | How to create HTML Forms in Telugu
పైన వ్రాసిన కోడ్ లో ఒక హెడ్డింగ్ వ్రాసాను. తరువాత, form అని ఒక టాగ్ వ్రాయడం జరిగింది. ఒక ఫారం కోసం మనం ఏ టాగ్ వ్రాసిన, అవి అన్ని ఆ ఫారం టాగ్ లోపల మాత్రమే వ్రాయాలి.
అందులో మనం మొదట username అని వ్రాసి, తరువాత input అని ఒక టాగ్ వ్రాసాను. మనం ఏ విధమైన field వ్రాయాలి అన్నా, input టాగ్స్ ఎక్కువగా ఉపయోగిస్తాం. అయితే వ్రాసిన input టాగ్ యొక్క attribute వల్ల కూడా ఫీల్డ్ మారిపోతుంది.
ఈ లెసన్ లో మనం ఒక రెండు attributes గురించి తెలుసుకుందాం. మొదటిది text అనే attribute value. ఈ text అనే attribute value ద్వారా  మనం టైపు చేసే టెక్స్ట్ కనిపించటానికి ఉపయోగిస్తాం.
ఇలా వ్రాసిన కోడ్ సేవ్ చేసి, వెబ్ పేజీని రిఫ్రెష్ చేయండి. అప్పుడు ఈ విధంగా మీకు కనిపిస్తుంది.
Website Designing Course | How to create HTML Forms in Telugu
ఇప్పుడు మీరు username కనుక అక్కడ టైపు చేస్తే మీరు ఏమి టైప్ చేస్తే అక్కడ అది కనిపిస్తుంది. ఇక్కడ నేను ఒక username ఈ విధంగా టైప్ చేస్తున్నాను.
Website Designing Course | How to create HTML Forms in Telugu
మీకు పైన కనిపించినట్టు కనిపిస్తుంది.
అదే టాగ్ లో name అనే attribute ఉంది. ఈ attribute మనం అప్లికేషన్స్ కోసం ఉపయోగిస్తాం. ఈ attribute ద్వారా మనం ఈ ఫారం పని చేయటానికి background లో వ్రాసిన కోడ్ కోసం ఉపయోగిస్తాం. ఒక డిజైనర్ అయితే ఇంతకూ మించి అవసరం లేదు.
తరువాత వ్రాసిన value attribute empty గా ఇవ్వటం జరిగింది. ఈ attribute లో మీరు ఏ వేల్యూ అయితే వ్రాస్తారో ఆ వేల్యూ మీకు పేజీ యొక్క రిజల్ట్ లో కనిపిస్తుంది.
మీకు ఒక ఉదాహరణ చూద్దాం.
Website Designing Course | How to create HTML Forms in Telugu
పైన చూపించిన విధంగా కనుక మీరు కోడ్ వ్రాస్తే మీకు క్రింద చూపించిన విధంగా కనిపిస్తుంది.
Website Designing Course | How to create HTML Forms in Telugu
ఇప్పుడు ఇంకొక టాగ్ ఈ విధంగా వ్రాద్దాం.
Website Designing Course | How to create HTML Forms in Telugu
ఇప్పుడు ఇందులో వ్రాసిన విధంగా వ్రాస్తే మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course | How to create HTML Forms in Telugu
ఇప్పుడు ఒకసారి కోడ్ చూద్దాం.
ఇందులో మనం వ్రాసిన type అనే attribute లో password అనే వేల్యూ వ్రాయటం వలన మనకి ఆ ఫీల్డ్ పాస్వర్డ్ ని హైడ్ చేస్తుంది. ఎందుకు అంటే మనం టైప్ చేసిన పాస్వర్డ్ కనిపించకూడదు కాబట్టి, ఒక్కసారి చూద్దాం.
Website Designing Course | How to create HTML Forms in Telugu
ఇప్పుడు ఇక్కడ నేను పాస్వర్డ్ టైపు చేస్తే ఈ విధంగా కనిపిస్తుంది. ఇలా పాస్వర్డ్ కనిపించకుండా ఉండటానికి, type attribute value password గా ఇవ్వాలి.
ఇక మిగిలిన name, value attributes పైన చెప్పిన విధంగా ఉపయోగపడతాయి.
అంత బాగానే ఉంది, ఇప్పుడు మనం ఒక బటన్ క్రియేట్ చేయాలి.
బటన్ కోసం ఇలా కోడింగ్ వ్రాయండి.
Website Designing Course | How to create HTML Forms in Telugu
ఈ విధంగా కోడ్ వ్రాసి, సేవ్ చేసి, వెబ్ పేజీ ని రిఫ్రెష్ చేయండి. అప్పుడు మీకు ఈ విధంగా కనిపిస్తుంది.
 Website Designing Course | How to create HTML Forms in Telugu
ఇప్పుడు మనం input టాగ్ లో మనం type attribute లో వేల్యూ submit అని ఇచ్చాము. ఇలా ఇవ్వటం వల్లనే మనకి లాగిన్ బటన్ కనిపిస్తుంది. Name attribute పైవాటిలాగే, value attribute లో మనం ఏది టైప్ చేస్తే అది డిస్ప్లే అవుతుంది. అప్పుడు మీకు పై విధంగా కనిపిస్తుంది.
ఇప్పుడు ఒక ఫీల్డ్ క్రింద మరొక ఫీల్డ్ ఉండాలి అనుకుంటే ఈ విధంగా టైప్ చేయండి.
Website Designing Course | How to create HTML Forms in Telugu
ఈ విధంగా బ్రేక్ టాగ్ వ్రాస్తే మీకు ఈ విధంగా కనిపిస్తుంది.
Website Designing Course | How to create HTML Forms in Telugu
ఈ విధంగా మనం లాగిన్ ఫార్మ్స్ క్రియేట్ చేయవచ్చు. CSS ద్వారా మరింత అందంగా క్రియేట్ చేయవచ్చు. ఇది ఈ లెసన్, నెక్స్ట్ లెసన్ లో మిగిలిన ఫారం ఫీల్డ్స్ గురించి తెలుసుకుందాం.
ఈ లెసన్ ఇంకా బాగా అర్థం అవటం కోసం ఒక వీడియో లెసన్ కూడా చేయటం జరిగింది. దానిని కూడా ఈ లెసన్ లోనే ఇవ్వటం జరిగింది. ఒక్కసారి ఆ వీడియో చుస్తే మీకు ఇంకా బాగా అర్థం అవుతుంది. కాబట్టి మర్చిపోకుండా వీడియో కూడా చూడండి. ఈ కోర్స్ కనుక మీకు అర్థం అయితే మీ ఫ్రెండ్స్ కి కూడా షేర్ చేయండి. డౌట్స్ ఉంటె కామెంట్ చేయండి. ధన్యవాదాలు.

Add a Comment

Your email address will not be published. Required fields are marked *