tag is used to create HTML forms and can contain various form elements like , , , and . It allows users to enter input which can then be sent to a server for processing. Common uses include login forms, search boxes, and data collection forms. CSS is used to style and lay out elements on HTML pages and can be defined internally, externally in CSS files, or inline in elements. CSS selectors are used to target specific elements for styling based on things like element names, ids, classes, attributes and more."> tag is used to create HTML forms and can contain various form elements like , , , and . It allows users to enter input which can then be sent to a server for processing. Common uses include login forms, search boxes, and data collection forms. CSS is used to style and lay out elements on HTML pages and can be defined internally, externally in CSS files, or inline in elements. CSS selectors are used to target specific elements for styling based on things like element names, ids, classes, attributes and more."> Address: [go: up one dir, main page] Include Form Remove Scripts Session Cookies Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)12 views24 pagesLecture 4The <form> tag is used to create HTML forms and can contain various form elements like <input>, <textarea>, <button>, <select> and <option>. It allows users to enter input which can then be sent to a server for processing. Common uses include login forms, search boxes, and data collection forms. CSS is used to style and lay out elements on HTML pages and can be defined internally, externally in CSS files, or inline in elements. CSS selectors are used to target specific elements for styling based on things like element names, ids, classes, attributes and more.Uploaded byZakarya RaaziAI-enhanced title and descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on ScribdDownloadSaveSave Lecture-4 For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)12 views24 pagesLecture 4The <form> tag is used to create HTML forms and can contain various form elements like <input>, <textarea>, <button>, <select> and <option>. It allows users to enter input which can then be sent to a server for processing. Common uses include login forms, search boxes, and data collection forms. CSS is used to style and lay out elements on HTML pages and can be defined internally, externally in CSS files, or inline in elements. CSS selectors are used to target specific elements for styling based on things like element names, ids, classes, attributes and more.Uploaded byZakarya RaaziAI-enhanced title and descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PPTX, PDF, TXT or read online on ScribdCarousel PreviousCarousel NextDownloadSaveSave Lecture-4 For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 24SearchFullscreenDefinition and UsageThe <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> <output>• Example• An HTML form with two input fields and one submit button:• <form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>Definition and UsageThe <input> tag specifies an input field where the user can enter data.The <input> element is the most important form element.The <input> element can be displayed in several ways, depending on the type attribute.The different input types are as follows: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> Tips and Notes <input type="reset"> <input type="search"> <input type="submit"> Tip: Always use the <label> tag to define labels <input type="tel"> <input type="text"> (default value) for <input type="text">, <input <input type="time"> type="checkbox">, <input type="radio">, <input type="url"> <input type="week"> <input type="file">, and <input type="password">Look at the type attribute to see examples for each input type!Relation between Html and PHPAdd.html<html><body><h1>Program for adding 2 numbers</h1><form action="add.php" method="get"><label>enter 1st number</label><input type="text" name="t1"><br><br><label>Enter 2nd number</label><input type="text" name="t2"><br><br><input type="submit" name="submit"></form></body></html><?php$a=$_GET["t1"];$b=$_GET["t2"];$c=$a+$b;echo "Result=".$c;?>Code of php and html in one fileAddhtmlphpcombine.php<html><body><h1>Program for adding 2 numbers</h1><form action="add.php" method="get"><label>enter 1st number</label><input type="text" name="t1"><br><br><label>Enter 2nd number</label><input type="text" name="t2"><br><br><input type="submit" name="submit"></form></body></html><?phpif(isset($_GET["submit"])) {$a=$_GET["t1"];$b=$_GET["t2"];$c=$a+$b;echo "Result=".$c;}?>What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to bedisplayed on screen, paper, or in other media CSS saves a lot of work. It can control thelayout of multiple web pages all at once External stylesheets are stored in CSS filesTypes of CSSThree Ways to Insert CSS• There are three ways of inserting a style sheet:• External CSS• Internal CSS• Inline CSSExternal CSS• With an external style sheet, you can change the look of an entire website by changing just one file!• Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.• Example• External styles are defined within the <link> element, inside the <head> section of an HTML page:• <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>An external style sheet can be written in any text editor, and must besaved with a .css extension.• The external .css file should not contain any HTML tags.• Here is how the "mystyle.css" file looks:• "mystyle.css"• body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }Internal CSS• An internal style sheet may be used if one single HTML page has a unique style.• The internal style is defined inside the <style> element, inside the head section.ExampleInternal styles are defined within the <style> element, inside the <head> section of an HTML page:<!DOCTYPE html><html><head><style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>Inline CSS• An inline style may be used to apply a unique style for a single element.• To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.ExampleInline styles are defined within the "style" attribute of therelevant element:<!DOCTYPE html><html><body><h1 style="color:blue;text-align:center;">This is a heading</h1><p style="color:red;">This is a paragraph.</p></body></html>• CSS Selectors• CSS selectors are used to "find" (or select) the HTML elements you want to style.• We can divide CSS selectors into five categories:• Simple selectors (select elements based on name, id, class)• Combinator selectors (select elements based on a specific relationship between them)• Pseudo-class selectors (select elements based on a certain state)• Pseudo-elements selectors (select and style a part of an element)• Attribute selectors (select elements based on an attribute or attribute value)The CSS element SelectorThe element selector selects HTML elements based onthe element name.ExampleHere, all <p> elements on the page will be center-aligned, with a red text color:p{ text-align: center; color: red;}• The CSS id Selector• The id selector uses the id attribute of an HTML element to select a specific element.• The id of an element is unique within a page, so the id selector is used to select one unique element!• To select an element with a specific id, write a hash (#) character, followed by the id of the element.• Example• The CSS rule below will be applied to the HTML element with id="para1":#para1 { text-align: center; color: red;}• The CSS class Selector• The class selector selects HTML elements with a specific class attribute.• To select elements with a specific class, write a period (.) character, followed by the class name.• Example• In this example all HTML elements with class="center" will be red and center-aligned:.center { text-align: center; color: red;}• Example• In this example only <p> elements with class="center" will be center-aligned:p.center { text-align: center; color: red;}• HTML elements can also refer to more than one class.• Example• In this example the <p> element will be styled according to class="center" and to class="large":<p class="center large">This paragraph refers totwo classes.</p><!DOCTYPE html><html><head><style>p.center { text-align: center; color: red;}p.large { font-size: 300%;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be red and center-aligned.</p><p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p></body></html>You might also likeTraditional Christian Wedding Ceremony ScriptPDF100% (1)Traditional Christian Wedding Ceremony Script5 pagesUltra HTML ReferenceFrom EverandUltra HTML ReferenceMike Abelar2/5 (1)Design Optimization of Guide Vane Geometry of Kaplan TurbinePDFNo ratings yetDesign Optimization of Guide Vane Geometry of Kaplan Turbine6 pagesNavigational Safety in The Straits of Malacca: Current and Future ConcernPDF100% (1)Navigational Safety in The Straits of Malacca: Current and Future Concern32 pagesWeb Design 6 10PDFNo ratings yetWeb Design 6 104 pagesHTML Forms: Input ElementsPDFNo ratings yetHTML Forms: Input Elements55 pagesHTML2PDFNo ratings yetHTML225 pagesHTML - CSS - Input Forms 2 PDFPDFNo ratings yetHTML - CSS - Input Forms 2 PDF58 pagesWT & E-Commerce UNIT IIIPDFNo ratings yetWT & E-Commerce UNIT III10 pagesWeb Tech l4PDFNo ratings yetWeb Tech l414 pagesUnit 1PDFNo ratings yetUnit 154 pagesHTML CSS JSPDFNo ratings yetHTML CSS JS128 pagesIntroduction To HTML & CssPDFNo ratings yetIntroduction To HTML & Css26 pagesCssPDFNo ratings yetCss113 pagesExpt 2PDFNo ratings yetExpt 24 pagesHTML Forms and CssPDFNo ratings yetHTML Forms and Css7 pagesWeek 05PDFNo ratings yetWeek 0535 pagesA Seminar On Professional Web Development Using PHP Submitted To Department of Electronics and Communication ITM GIDA, GorakhpurPDFNo ratings yetA Seminar On Professional Web Development Using PHP Submitted To Department of Electronics and Communication ITM GIDA, Gorakhpur37 pages305 Unit1PDFNo ratings yet305 Unit146 pagesHTML and Css GlossaryPDFNo ratings yetHTML and Css Glossary11 pagesIntroduction To CSS - PrelimPDFNo ratings yetIntroduction To CSS - Prelim9 pagesCS 3111PDFNo ratings yetCS 31119 pagesCSS Cascading Style SheetPDFNo ratings yetCSS Cascading Style Sheet28 pagesWeb - Basic ConceptsPDFNo ratings yetWeb - Basic Concepts29 pagesCSSPDF100% (1)CSS264 pagesChapter 2 CSSPDFNo ratings yetChapter 2 CSS8 pagesMidterm NotesPDFNo ratings yetMidterm Notes51 pagesCSSStartPDFNo ratings yetCSSStart33 pagesLesson1 - Advanced Web Design - Part1PDFNo ratings yetLesson1 - Advanced Web Design - Part146 pagesHTML & CSSPDFNo ratings yetHTML & CSS30 pagesCSC 122 Lecture NotePDFNo ratings yetCSC 122 Lecture Note23 pagesGrade 8 RevisionPDFNo ratings yetGrade 8 Revision11 pagesStyling HTML With CSSPDFNo ratings yetStyling HTML With CSS6 pagesWD Unit 3 (A)PDFNo ratings yetWD Unit 3 (A)39 pagesW3schools: CSS IntroductionPDFNo ratings yetW3schools: CSS Introduction101 pagesCSS Tutorial: Examples in Each ChapterPDF100% (2)CSS Tutorial: Examples in Each Chapter332 pagesHTML+CSS+Java ScriptPDFNo ratings yetHTML+CSS+Java Script56 pagesChapter 3 (Web Design and Programming)PDFNo ratings yetChapter 3 (Web Design and Programming)86 pagesIntroduction To Web Technology NotesPDFNo ratings yetIntroduction To Web Technology Notes48 pagesUnit IiiPDFNo ratings yetUnit Iii46 pagesHTML Forms: - .PDFNo ratings yetHTML Forms: - .6 pagesHTML Vs XMLPDFNo ratings yetHTML Vs XML9 pagesChapter 4 - FSD IPDFNo ratings yetChapter 4 - FSD I63 pagesFinal AbhishekPDFNo ratings yetFinal Abhishek16 pagesCSS (Cascading Style Sheet)PDFNo ratings yetCSS (Cascading Style Sheet)95 pagesFront End RoadmapPDFNo ratings yetFront End Roadmap114 pagesw02s01 Html5&CssPDFNo ratings yetw02s01 Html5&Css74 pagesCss Completo e TotalPDFNo ratings yetCss Completo e Total566 pagesCss (Cascading Style Sheet)PDFNo ratings yetCss (Cascading Style Sheet)18 pagesCss 10,11PDFNo ratings yetCss 10,1118 pagesUnit 2 - HTML and CSSPDFNo ratings yetUnit 2 - HTML and CSS8 pagesWhat Is HTML?: Emphasised Text. This Is A Heading This Is A SubheadingPDFNo ratings yetWhat Is HTML?: Emphasised Text. This Is A Heading This Is A Subheading6 pagesChapter Three CSSPDFNo ratings yetChapter Three CSS12 pagesCS 1 HTML Intro PDFNo ratings yetCS 1 HTML Intro 30 pagesCSS NotesPDFNo ratings yetCSS Notes38 pagesCSS Tutorial: Examples in Each ChapterPDFNo ratings yetCSS Tutorial: Examples in Each Chapter180 pagesWT Unit2 CssPDFNo ratings yetWT Unit2 Css20 pagesHTML Styles CssPDFNo ratings yetHTML Styles Css12 pages03 HTML CSSPDFNo ratings yet03 HTML CSS47 pagesWhat Is CSS?PDFNo ratings yetWhat Is CSS?197 pagesIntroPDFNo ratings yetIntro16 pagesCSS JS 18 05 25PDFNo ratings yetCSS JS 18 05 2575 pagesCSS Selectors and SpecificityFrom EverandCSS Selectors and SpecificityAbdelfattah RagabNo ratings yetLecture 1PDFNo ratings yetLecture 159 pagesLecture 5PDFNo ratings yetLecture 526 pagesLecture 2PDFNo ratings yetLecture 226 pagesLecture 3PDFNo ratings yetLecture 325 pagesDesign and Implementation of Text To Speech Audio SystemPDFNo ratings yetDesign and Implementation of Text To Speech Audio System5 pagesDAWN TA Course Rough NotePDFNo ratings yetDAWN TA Course Rough Note4 pagesGUMv 2PDFNo ratings yetGUMv 224 pagesMachine Learning Cheatsheet Compiled and Curated by Robins YadavPDFNo ratings yetMachine Learning Cheatsheet Compiled and Curated by Robins Yadav14 pagesSAS - Under The Skin PDFPDF100% (1)SAS - Under The Skin PDF38 pagesICT Lab1PDF100% (1)ICT Lab14 pagesTraditional English DisciplinePDF100% (1)Traditional English Discipline9 pagesEmployer'S Liability in Case of Occupational DiseasesPDFNo ratings yetEmployer'S Liability in Case of Occupational Diseases20 pagesAS Business NotesPDF81% (27)AS Business Notes119 pagesBuy The Fear Sell The Greed 7 Behavioral Quant Strategies For TradersPDFNo ratings yetBuy The Fear Sell The Greed 7 Behavioral Quant Strategies For Traders215 pagesUndergraduate Algebra Problems and SolutionsPDF100% (1)Undergraduate Algebra Problems and Solutions106 pagesFull Practicum Lesson 1 - Onomatopoeia 1PDFNo ratings yetFull Practicum Lesson 1 - Onomatopoeia 19 pagesPOB UNIT 3 Management and Industrial RelationsPDFNo ratings yetPOB UNIT 3 Management and Industrial Relations5 pagesKamaz Trucks ENG 2011PDF100% (4)Kamaz Trucks ENG 201168 pagesConversation Threading ArticlePDF100% (1)Conversation Threading Article4 pagesAcustica: Light Diffraction by Ultrasonic GratingsPDFNo ratings yetAcustica: Light Diffraction by Ultrasonic Gratings8 pagesAll Derivations For PhysicsPDFNo ratings yetAll Derivations For Physics5 pages10.1515 - Zna 2016 0149PDFNo ratings yet10.1515 - Zna 2016 014910 pagesWellbore Models GWELL, GWNACL, and HOLA User's Guide PDFPDFNo ratings yetWellbore Models GWELL, GWNACL, and HOLA User's Guide PDF114 pages35-10-25 30.07.2011 Revision6PDFNo ratings yet35-10-25 30.07.2011 Revision666 pages001 MMW Elementary Logic LectPDFNo ratings yet001 MMW Elementary Logic Lect47 pagesS T Y H M: Efer Oldot Eshua A AshiachPDFNo ratings yetS T Y H M: Efer Oldot Eshua A Ashiach18 pagesExtra PDFNo ratings yetExtra 3 pagesParallel and Distributed Transaction Processing: Practice ExercisesPDFNo ratings yetParallel and Distributed Transaction Processing: Practice Exercises4 pagesCH 7PDFNo ratings yetCH 720 pages10th Class Lab Record (Modified)PDFNo ratings yet10th Class Lab Record (Modified)18 pagesReliance Jio Campus Recruitment Drive Registered Eligible Students-2020 BatchPDFNo ratings yetReliance Jio Campus Recruitment Drive Registered Eligible Students-2020 Batch3 pages
Lecture 4
AI-enhanced title and description
The <input> tag specifies an input field where the user can enter data.
The <input> element can be displayed in several ways, depending on the type attribute.
<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> Tips and Notes <input type="reset"> <input type="search"> <input type="submit"> Tip: Always use the <label> tag to define labels <input type="tel"> <input type="text"> (default value) for <input type="text">, <input <input type="time"> type="checkbox">, <input type="radio">, <input type="url"> <input type="week"> <input type="file">, and <input type="password">Look at the type attribute to see examples for each input type!Relation between Html and PHPAdd.html
<html><body><h1>Program for adding 2 numbers</h1><form action="add.php" method="get"><label>enter 1st number</label><input type="text" name="t1"><br><br><label>Enter 2nd number</label><input type="text" name="t2"><br><br><input type="submit" name="submit"></form></body></html><?php$a=$_GET["t1"];$b=$_GET["t2"];$c=$a+$b;echo "Result=".$c;?>Code of php and html in one fileAddhtmlphpcombine.php
<html><body><h1>Program for adding 2 numbers</h1><form action="add.php" method="get"><label>enter 1st number</label><input type="text" name="t1"><br><br><label>Enter 2nd number</label><input type="text" name="t2"><br><br><input type="submit" name="submit"></form></body></html><?phpif(isset($_GET["submit"])) {$a=$_GET["t1"];$b=$_GET["t2"];$c=$a+$b;echo "Result=".$c;}?>What is CSS?
<h1>This is a heading</h1> <p>This is a paragraph.</p>
</body> </html>An external style sheet can be written in any text editor, and must besaved with a .css extension.• The external .css file should not contain any HTML tags.• Here is how the "mystyle.css" file looks:• "mystyle.css"• body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }Internal CSS• An internal style sheet may be used if one single HTML page has a unique style.• The internal style is defined inside the <style> element, inside the head section.ExampleInternal styles are defined within the <style> element, inside the <head> section of an HTML page:<!DOCTYPE html><html><head><style>body { background-color: linen;}
h1 { color: maroon; margin-left: 40px;}</style></head><body>
<h1>This is a heading</h1><p>This is a paragraph.</p>
</body></html>Inline CSS• An inline style may be used to apply a unique style for a single element.• To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.ExampleInline styles are defined within the "style" attribute of therelevant element:<!DOCTYPE html><html><body>
</body></html>• CSS Selectors• CSS selectors are used to "find" (or select) the HTML elements you want to style.• We can divide CSS selectors into five categories:• Simple selectors (select elements based on name, id, class)• Combinator selectors (select elements based on a specific relationship between them)• Pseudo-class selectors (select elements based on a certain state)• Pseudo-elements selectors (select and style a part of an element)• Attribute selectors (select elements based on an attribute or attribute value)The CSS element SelectorThe element selector selects HTML elements based onthe element name.ExampleHere, all <p> elements on the page will be center-aligned, with a red text color:p{ text-align: center; color: red;}• The CSS id Selector• The id selector uses the id attribute of an HTML element to select a specific element.• The id of an element is unique within a page, so the id selector is used to select one unique element!• To select an element with a specific id, write a hash (#) character, followed by the id of the element.• Example• The CSS rule below will be applied to the HTML element with id="para1":#para1 { text-align: center; color: red;}• The CSS class Selector• The class selector selects HTML elements with a specific class attribute.• To select elements with a specific class, write a period (.) character, followed by the class name.• Example• In this example all HTML elements with class="center" will be red and center-aligned:.center { text-align: center; color: red;}• Example• In this example only <p> elements with class="center" will be center-aligned:p.center { text-align: center; color: red;}• HTML elements can also refer to more than one class.• Example• In this example the <p> element will be styled according to class="center" and to class="large":<p class="center large">This paragraph refers totwo classes.</p><!DOCTYPE html><html><head><style>p.center { text-align: center; color: red;}
p.large { font-size: 300%;}</style></head><body>
</body></html>