หน้าแรก>ซอร์สโค้ด CGI>หมวดหมู่อื่นๆ
ดาวน์โหลด
front end

มันเป็นพื้นที่เก็บข้อมูลของการพัฒนาเว็บ

การเตรียมตัว : สำหรับเนื้อหานี้ นักเรียนจะต้องมีคอมพิวเตอร์ที่เชื่อมต่ออินเทอร์เน็ต, เว็บเบราว์เซอร์ที่รองรับ HTML 5 (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera ฯลฯ) โปรแกรมแก้ไขข้อความ (VSCode ฯลฯ) .) และแพลตฟอร์มโฮสติ้ง (ฟรีหรือจ่ายเงิน)

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

เว็บไซต์คืออะไร?

เมื่อเราพูดถึงเว็บไซต์ เราจะสังเกตได้ว่าคำนี้เป็นการรวมคำสองคำในภาษาอังกฤษเข้าด้วยกัน คือ web ซึ่งหมายถึงเครือข่ายและหมายถึงเวิลด์ไวด์เว็บ และคำว่า site ซึ่งหมายถึงสถานที่ ในแง่นี้ เว็บไซต์หรือไซต์เป็นสถานที่ที่สามารถเข้าถึงได้บนอินเทอร์เน็ต ผ่านทาง URL และมีชุดของเพจที่ตั้งโปรแกรมไว้ในภาษาใดภาษาหนึ่ง

เพื่อให้เข้าใจหัวข้อนี้ได้ดีขึ้น ลองดูตัวอย่าง: เมื่อคุณพิมพ์ที่อยู่ blog.betrybe.com ลงในอินเทอร์เน็ตเบราว์เซอร์ของคุณเพื่อเข้าถึงบล็อกของ Trybe เบราว์เซอร์จะค้นหาว่าเว็บไซต์นี้อยู่ที่ใดบนอินเทอร์เน็ต จากนั้นจะมีการร้องขอไปยังเซิร์ฟเวอร์

ไฟล์ข้อความ รูปภาพ และสไตล์ทั้งหมดที่ประกอบเป็นเว็บเพจจะถูกจัดเก็บไว้ในเซิร์ฟเวอร์นี้ จากนั้น เซิร์ฟเวอร์จะส่งคืนเอกสารชุดนี้ไปยังเบราว์เซอร์ เพื่อให้สามารถแสดงเนื้อหาตามที่คุณเห็นบนหน้าจอของคุณ

เว็บไซต์สามารถนำเสนอรูปแบบและเนื้อหาที่แตกต่างกันได้ ตัวเลือกบางส่วนได้แก่: ร้านค้าเสมือนจริง เช่น Mercado Livre และ Amazon ซึ่งสามารถซื้อและขายผลิตภัณฑ์ได้ เว็บไซต์และพอร์ตโฟลิโอของสถาบันที่ใช้โดยบริษัทและบุคคลเพื่อนำเสนอตัวเองและให้ลูกค้าค้นพบ และบล็อกต่างๆ เช่นเดียวกับที่คุณอ่าน

นอกจากนี้ เว็บไซต์ยังสามารถจัดประเภทเป็นแบบคงที่หรือไดนามิกได้ โดยทั่วไปเว็บไซต์แบบคงที่ได้รับการพัฒนาโดยใช้ HTML, CSS และ JavaScript เนื้อหาง่ายกว่าและไม่มีการโต้ตอบกับฐานข้อมูล

เว็บไซต์แบบไดนามิก นอกเหนือจากการใช้ประโยชน์จาก HTML, CSS และ JavaScript แล้ว ยังใช้ภาษาการเขียนโปรแกรมที่มีประสิทธิภาพมากกว่า เช่น PHP ไซต์เหล่านี้มีฟังก์ชันการทำงานที่เชื่อมต่อกับฐานข้อมูล ด้วยวิธีนี้ แต่ละหน้าที่เข้าถึงสามารถนำข้อมูลเฉพาะมาได้

การออกแบบเว็บไซต์

ด้วย การออกแบบเว็บไซต์ คุณต้องสังเกตความสำคัญของอินเทอร์เฟซสำหรับการพัฒนาเว็บไซต์ วิวัฒนาการของเทคโนโลยีที่ใช้ในการสร้างหน้าเว็บที่หลากหลาย (เว็บ 1.0, เว็บ 2.0, เว็บ 3.0 และเว็บ 4.0) วิวัฒนาการของอินเทอร์เฟซ (ความสวยงาม การทำงาน และโครงสร้าง ).

ดังนั้นคุณต้องเข้าใจถึงความสำคัญของการสร้างอินเทอร์เฟซที่หลากหลายสำหรับการสร้างเว็บไซต์โดยมุ่งเป้าไปที่การนำทางและประสบการณ์การใช้งานที่ดีที่สุดสำหรับผู้ใช้ปลายทาง โดยรู้จักเทคโนโลยีบางอย่างที่ใช้ในอดีตเพื่อสร้างเว็บไซต์ออนไลน์ จากวิสัยทัศน์นี้ ให้สังเกตแนวโน้มของตลาดเก่า รวมถึงดูแนวโน้มใหม่ในการพัฒนาอินเทอร์เฟซ

จานสี:

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colorcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

การไล่ระดับสี:

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

การพัฒนาเว็บ

โดยพื้นฐานแล้ว การพัฒนาเว็บหมายถึงการเขียนโค้ดเพจสำหรับอินเทอร์เน็ต อย่างไรก็ตาม งานนี้นอกเหนือไปจากการใช้ HTML และ CSS ซึ่งเป็นเครื่องมือพื้นฐานสำหรับการสร้างเพจแบบคงที่ ซึ่งนำเสนอข้อมูลที่สามารถแก้ไขได้โดยการแก้ไขซอร์สโค้ดเท่านั้น

ในทางกลับกัน หน้าเว็บบนเว็บไซต์อาจเป็นไดนามิกได้ ซึ่งหมายความว่าเนื้อหาที่แสดงสามารถเปลี่ยนแปลงได้โดยไม่รบกวนซอร์สโค้ด เพื่อให้สิ่งนี้เป็นไปได้ ส่วนไดนามิกของเว็บไซต์จะถูกจัดเก็บไว้ในฐานข้อมูล ซึ่งเข้าถึงได้เมื่อใดก็ตามที่จำเป็นต้องดึงเนื้อหานี้

คุณสมบัตินี้ช่วยให้สามารถพัฒนาแอปพลิเคชันที่ซับซ้อนได้ ซึ่งใช้กฎเกณฑ์ทางธุรกิจ, API — Application Programming Interface — และอื่นๆ อีกมากมาย ดังนั้นจึงมีการแบ่งกิจกรรมที่เน้นไปที่การพัฒนาเว็บ การเขียนโค้ดฝั่งไคลเอ็นต์ (ส่วนหน้า) และการเขียนโค้ดฝั่งเซิร์ฟเวอร์ (ส่วนหลัง)

ตัวอย่าง API ที่มีโครงสร้างที่ใช้มากที่สุดในปัจจุบันสำหรับเว็บและแอปพลิเคชันมือถือ REST API เรียกอีกอย่างว่า RESTful API

แอปพลิเคชันเว็บคือจำนวนไซต์บนเว็บที่เพิ่มขึ้น กล่าวคือ แอปพลิเคชันเหล่านี้เลียนแบบแอปพลิเคชันเดสก์ท็อปมากกว่าเอกสารแบบเดิมและลิงก์แบบคงที่ของข้อความและรูปภาพที่ประกอบขึ้นเป็นส่วนใหญ่ของเว็บ ตัวอย่างเช่น เรามีโปรแกรมประมวลผลคำออนไลน์ เครื่องมือแก้ไขรูปภาพ การทำแผนที่เว็บไซต์ ฯลฯ ขับเคลื่อนด้วย JavaScript อย่างหนัก พวกเขาผลักดัน HTML4 ไปสู่ขีดความสามารถสูงสุด HTML5 ระบุ API ใหม่ (Application Programming Interface) สำหรับ DOM (Document Object Model) ซึ่งเป็นรูปแบบข้ามแพลตฟอร์มและไม่ขึ้นอยู่กับภาษาสำหรับการแสดงและการโต้ตอบกับวัตถุและเอกสาร HTML, XHTML และ XML

API ใหม่เหล่านี้ช่วยให้คุณลากและวางออบเจ็กต์ที่เซิร์ฟเวอร์ส่ง เช่น ภาพวาด วิดีโอ และอื่นๆ ที่คล้ายกัน

อินเทอร์เฟซใหม่เหล่านี้ที่หน้า HTML เปิดเผยกับ JavaScript ผ่านออบเจ็กต์ใน DOM ทำให้ง่ายต่อการเขียนแอปพลิเคชันโดยใช้รูปแบบที่มีการระบุอย่างมาก แทนที่จะเป็นเพียงลูกเล่นที่มีการจัดทำเอกสารไม่ดี

ที่สำคัญยิ่งกว่านั้นคือความต้องการมาตรฐานแบบเปิดที่ให้บริการฟรี (เพื่อใช้งานและนำไปใช้) ที่สามารถแข่งขันกับมาตรฐานที่เป็นกรรมสิทธิ์ เช่น Adobe Flash หรือ Microsoft Silverlight ไม่ว่าคุณจะคิดอย่างไรเกี่ยวกับเทคโนโลยีหรือบริษัทเหล่านี้ เราเชื่อว่าเว็บเป็นแพลตฟอร์มที่สำคัญสำหรับสังคม การพาณิชย์ และการสื่อสารที่จะอยู่ในมือของผู้ผลิต

มีหน้าเว็บหลายล้านหน้าที่ใช้งานอยู่แล้ว และจำเป็นต้องทำซ้ำต่อไป ดังนั้น HTML5 ส่วนใหญ่เป็นอนุพันธ์ของ HTML4 ที่ยังคงกำหนดวิธีที่เบราว์เซอร์ควรจัดการกับมาร์กอัปเก่าเช่น ,

และมาร์กอัปใหม่อื่น ๆ เมื่อมีหน้าเว็บหลายล้านหน้าใช้งาน

อินเทอร์เฟซ

คำว่า อินเทอร์เฟซ สามารถมีได้หลายความหมายขึ้นอยู่กับพื้นที่ที่ทำการศึกษา ในด้านเทคโนโลยีสารสนเทศ อินเทอร์เฟซ หมายถึง ความเป็นไปได้ของการสื่อสารระหว่างสองระบบที่ไม่สามารถสื่อสารได้ตามธรรมชาติหากไม่มีความช่วยเหลือจากภายนอก

HCI คือการศึกษาปฏิสัมพันธ์ระหว่างผู้คนกับคอมพิวเตอร์ เป็นวิชาสหวิทยาการที่เกี่ยวข้องกับวิทยาการคอมพิวเตอร์ ศิลปะ การออกแบบ การยศาสตร์ จิตวิทยา สังคมวิทยา สัญศาสตร์ ภาษาศาสตร์ และสาขาที่เกี่ยวข้อง ปฏิสัมพันธ์ระหว่างมนุษย์กับเครื่องจักรเกิดขึ้นผ่านอินเทอร์เฟซผู้ใช้ ซึ่งประกอบด้วยซอฟต์แวร์และฮาร์ดแวร์

ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์เป็นสาขาวิชาที่เกี่ยวข้องกับการออกแบบ การประเมิน และการใช้งานระบบคอมพิวเตอร์เชิงโต้ตอบสำหรับการใช้งานของมนุษย์ และการศึกษาปรากฏการณ์หลักที่อยู่รอบตัวพวกเขา

ตัวอย่างที่ 3: การส่งข้อความไปยังอีเมล

 ส่งอีเมล

[HTML5] แท็กมัลติมีเดีย

คำว่าสื่อดิจิทัลนั้นตรงกันข้ามกับสื่ออะนาล็อกซึ่งถูกกำหนดโดยฐานวัสดุ เสียงจะถูกบันทึกในร่องเล็กๆ บนพื้นผิวไวนิล และเมื่อเข็มผ่านร่องเหล่านี้ เสียงก็ถูกสร้างขึ้นมาใหม่ ในสื่อดิจิทัล การสนับสนุนทางกายภาพแทบจะหายไป และข้อมูลจะถูกแปลงเป็นลำดับตัวเลขหรือตัวเลข ดังนั้นจึงมีการใช้คำว่าดิจิทัล ด้วยวิธีนี้ เสียง รูปภาพ ข้อความจึงเป็นลำดับของตัวเลข ซึ่งช่วยให้สามารถแชร์ข้อมูล จัดเก็บ และแปลงข้อมูลได้ ในความหมายที่กว้างที่สุด สื่อดิจิทัลสามารถถูกกำหนดให้เป็นชุดของยานพาหนะและอุปกรณ์สื่อสารที่ใช้เทคโนโลยีดิจิทัล ซึ่งช่วยให้สามารถเผยแพร่หรือสื่อสารทางดิจิทัลของงานทางปัญญาที่เป็นลายลักษณ์อักษร เสียง หรือภาพได้ แหล่งที่มาทางอิเล็กทรอนิกส์ที่ใช้ในกลยุทธ์การสื่อสารของแบรนด์กับผู้บริโภค โดยทั่วไปเรียกว่าสื่อดิจิทัล

Flash เป็นทางเลือกที่เหมาะสมที่สุดสำหรับผู้ที่ต้องการเพิ่มวิดีโอและเพลงลงในเว็บเพจมาโดยตลอด เคยเป็นและยังคงมีอยู่ในเบราว์เซอร์เกือบทั้งหมด และเรามีรูปแบบที่สามารถใช้งานได้โดยไม่มีปัญหาใหญ่ใดๆ

เพียงเพิ่ม การเรียกไปยังปลั๊กอิน และใช้งานได้

เนื่องจากเบราว์เซอร์ไม่สอดคล้องกัน จึงจำเป็นต้องเพิ่มทั้ง ; สำหรับคำสั่ง ; คำสั่งเฉพาะสำหรับการใช้ปลั๊กอินโดยทำซ้ำแอตทริบิวต์มากมาย ไม่ต้องพูดถึงว่าปลั๊กอินเช่น Flash ทำให้เกิดความไม่เสถียรมากมาย ทำให้เกิดข้อผิดพลาดที่นำไปสู่การปิดเบราว์เซอร์ด้วยซ้ำ

ด้วยเหตุนี้ HTML 5 จึงมาพร้อมกับการรองรับใหม่ในภาษาพื้นเมือง เพื่อหลีกเลี่ยงการใช้ปลั๊กอินและคำสั่งที่ไม่จำเป็น ในปัจจุบัน เพียงแค่ทำการโทรแบบธรรมดา ราวกับว่าเป็นรูปภาพและไฟล์จะถูกทริกเกอร์

 <การควบคุมวิดีโอ src="video.mp4" width="426" height="240">

ปัญหาที่นำเสนอโดยคำสั่งใหม่คือการใช้แอตทริบิวต์ src ซึ่งทำงานได้ไม่ดีในเบราว์เซอร์บางตัว และถ้าเราต้องการให้ทุกคนสามารถเปิดเพจด้วยเบราว์เซอร์ใดก็ได้ ก็จำเป็นต้องใช้แอตทริบิวต์ประเภทอื่น ดังนั้นจึงเป็นเรื่องปกติที่จะใช้แอตทริบิวต์ ในแท็ก

องค์ประกอบ สามารถใช้ได้หลายครั้ง และช่วยให้คุณสามารถกำหนดรูปแบบวิดีโอสำหรับแต่ละเบราว์เซอร์ ทำให้คุณเข้าถึงได้มากขึ้น

วิดีโอ

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

เสียง

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

มี ตัวแปลงสัญญาณ ที่เป็นไปได้หลายตัว และคุณจะต้องส่งออกอย่างน้อยสองเวอร์ชันเพื่อให้เข้าถึงได้มากขึ้น

หมายเหตุ : Codec คือโปรแกรมที่ใช้ในการเข้ารหัสและถอดรหัสไฟล์มีเดีย พวกเขาบีบอัดรูปแบบดั้งเดิม ชอบพื้นที่จัดเก็บข้อมูล และขยายขนาดในระหว่างการสร้างใหม่ เปลี่ยนกลับเป็นภาพหรือเสียง

ตัวอย่างเสียงและวิดีโอทั้งหมดที่กล่าวถึงจะถูกนำเข้าผ่านเอกสารในไดเร็กทอรี และคำถามก็คือ ฉันจะนำเข้าวิดีโอที่โฮสต์ไว้บนเว็บไซต์อย่าง YouTube หรือ Vimeo ได้อย่างไร และโซลูชันใดในสองโซลูชัน (ผ่านเอกสารหรือผ่านเซิร์ฟเวอร์) ที่ได้เปรียบมากที่สุด?

กำลังนำเข้าวิดีโอ

มาดูวิธีการนำเข้าวิดีโอจาก YouTube และ Vimeo ทีละขั้นตอน!

[HTML5] แท็กตาราง

จนกระทั่งการปรากฏตัวของ HTML5 ตาราง ถูกใช้เป็นทรัพยากรสำหรับการออกแบบเค้าโครงหน้า นักออกแบบใช้ตารางเป็นตารางเพื่อแสดงรูปภาพและข้อความ และมีการใช้กันอย่างแพร่หลาย กลายเป็นรูปแบบที่โดดเด่นของการออกแบบเว็บไซต์ จึงสร้างรูปลักษณ์ที่สมบูรณ์

อย่างไรก็ตาม ในปัจจุบันนี้ ในความเป็นจริงแล้ว การใช้ตารางกำลังขัดขวางการสร้างเว็บไซต์ที่ดีขึ้น เข้าถึงได้มากขึ้น ยืดหยุ่น และใช้งานได้จริง โดยเฉพาะอย่างยิ่งสำหรับสื่อใหม่ เช่น โทรศัพท์มือถือ แท็บเล็ต เป็นต้น

ตารางเหล่านี้ยังคงอยู่ใน HTML 5 เป็นทรัพยากรสำหรับการแสดงข้อมูลแบบตาราง ข้อมูลที่มาจากฐานข้อมูล ด้วย HTML เวอร์ชันใหม่ เราสามารถสร้างเว็บไซต์ที่สร้างขึ้นโดยไม่มีตารางได้อย่างสมบูรณ์ ดังนั้นจึงสร้างเลย์เอาต์แบบไดนามิกที่ปรากฏบนหน้าจอขนาดใหญ่ เช่น บนคอมพิวเตอร์ และปรับให้เข้ากับหน้าจอสมาร์ทโฟนขนาดเล็กได้ดี ต่อมาคุณจะเห็นวิธีสร้างเลย์เอาต์แบบตอบสนองด้วย HTML5 และ CSS3

คำสั่ง table ไม่ได้ถูกลบออกจากภาษา แต่การใช้งานถูกจำกัด ในทางกลับกัน เรายังมีเว็บไซต์หลายแห่งที่ใช้แหล่งข้อมูลนี้ ดังนั้นจึงเป็นสิ่งสำคัญที่เราจะต้องเข้าใจวิธีการทำงาน เพื่อที่เราจะสามารถรักษาเพจประเภทนี้ได้ หากจำเป็น

คำสั่งในการแทรกตารางคือ

ในการเริ่ม บรรทัด เราต้องแนะนำแท็ก และสำหรับ เซลล์
ซึ่งแบ่งแถวของตาราง แบ่งแถวของตารางโดยใส่เนื้อหาเป็นตัวหนา คำสั่งทั้งหมดเหล่านี้จะถูกยกเลิกด้วย
, และ ตามลำดับ 

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

คำสั่ง

มีชุดคุณลักษณะที่ช่วยในการจัดรูปแบบตาราง สิ่งสำคัญคือ:

align="" จัดแนวตารางในสามตำแหน่ง: center , left , right และ justify
bgcolor="" กำหนดสีของตาราง
border="" กำหนดขนาดของเส้นขอบ ถ้าเป็นศูนย์จะไม่แสดงเส้นขอบ
cellspacing="" กำหนดระยะห่างระหว่างเซลล์
colspan="" กำหนดการจัดกลุ่มระหว่างคอลัมน์ตารางตั้งแต่สองคอลัมน์ขึ้นไป (ด้านข้าง)
rowspan="" กำหนดการจัดกลุ่มระหว่างสองแถวขึ้นไปในตาราง (ทิศทางขึ้นและลง)
cellpadding="" กำหนดระยะห่างระหว่างข้อความและเส้นขอบเซลล์

แสดงข้อความที่อยู่กึ่งกลางของตาราง ราวกับว่าเป็นคำบรรยาย

แอตทริบิวต์กฎ

ในการเลือกแถวภายในที่จะแสดงภายในตาราง เราจะใช้แอตทริบิวต์ RULES ภายในแท็ก ส่วนเสริมของคุณลักษณะนี้คือ:

และ
none ไม่มีทั้งบรรทัด
all เพื่อแสดงแถวทั้งหมดระหว่างแต่ละคอลัมน์และแถวในตาราง (ค่าเริ่มต้น)
rows สำหรับเส้นแนวนอนระหว่างแต่ละแถวในตาราง
cols สำหรับเส้นแนวตั้งระหว่างแต่ละคอลัมน์ของตาราง
groups สำหรับแถวระหว่างกลุ่มคอลัมน์และส่วนแนวนอน ที่กำหนดโดยแท็กพิเศษ เช่น

ดูตัวอย่างบางส่วน:

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
 แบบฟอร์ม TAG
 ส่วนแบบฟอร์ม HTML มีความสำคัญมากสำหรับการกรอกข้อมูลที่ผู้ใช้ป้อนลงในหน้า HTML ข้อมูลนี้ถูกรวบรวมโดยแบ็คเอนด์ด้วยภาษาการเขียนโปรแกรมแบ็คเอนด์ (PHP, JavaScript, Python, Java ฯลฯ) ที่เก็บและสืบค้นข้อมูลนี้ในฐานข้อมูล (MySQL, PostgreSQL, MongoDB, OracleDB ฯลฯ) ). ลองดูที่แท็กแบบฟอร์ม:
 แบบฟอร์มเข้าสู่ระบบ (หม้อต้ม) : 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 ด้วยแอตทริบิวต์ type เราสามารถกำหนดประเภทของ input ที่ใช้ได้ คุณลักษณะ name='' ที่เราสามารถประมวลผลข้อมูลที่ส่งผ่านภาษาการเขียนโปรแกรม
 แบบฟอร์มเข้าสู่ระบบ (boilerplate) - ด้วย PHP : 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
 แบบฟอร์มลงทะเบียน (หม้อต้ม) : 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
 เราจะสามารถ input ระหว่างวิทยุได้ก็ต่อเมื่อ name เหมือนกัน ด้วยวิธีนี้เราสามารถจัดกลุ่มข้อมูลนี้และจะมีเพียงหนึ่งรายการเท่านั้นที่จะถูกทำเครื่องหมาย
 ด้วย checkbox เราสามารถเลือกได้มากกว่าหนึ่งตัวเลือกให้เลือก
 กับ
 เราสามารถกำหนดประเภท  และคุณลักษณะได้:
  •  button
  •  password
  •  text
 องค์ประกอบ  ,  และ ">
 < button type =" button " > Clique Aqui  button >
 กล่าวโดยสรุป หากคุณกำลังสร้างปุ่มสำหรับการนำทาง ให้ใช้  หากคุณกำลังสร้างปุ่มเพื่อส่งข้อมูลจากแบบฟอร์ม ให้ใช้  หรือ 
 คลาสหลอก คำนิยาม
 :hover มันเปลี่ยนองค์ประกอบโดยการวางเมาส์เหนือองค์ประกอบนั้น
 :active เปลี่ยนองค์ประกอบโดยคลิก
 :link เปลี่ยนลิงก์ที่ไม่ได้เยี่ยมชมทั้งหมด
 :visited เปลี่ยนแปลงลิงก์ที่เยี่ยมชมทั้งหมด
 :focus เปลี่ยน  องค์ประกอบที่มีโฟกัส
 :checked เปลี่ยนองค์ประกอบ  ที่ทำเครื่องหมายไว้ทั้งหมด
 :disable เปลี่ยนองค์ประกอบ  ที่ปิดใช้งานทั้งหมด
 :enabled เปลี่ยนองค์ประกอบ  ที่เปิดใช้งานทั้งหมด
 :empty เปลี่ยนแปลงทั้งหมด 
 องค์ประกอบที่ไม่มีลูก
 :first-child เปลี่ยนแต่ละองค์ประกอบที่เปิดใช้งาน 
 :enabled เปลี่ยนแต่ละองค์ประกอบที่เปิดใช้งาน 
 :first-child เปลี่ยนแต่ละ 
 องค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบหลัก
 :first-of-type มันเปลี่ยนแต่ละองค์ประกอบ 
 ที่เป็นองค์ประกอบ 
 แรกขององค์ประกอบหลัก
 :in-range เปลี่ยน  องค์ประกอบที่มีค่าภายในช่วงที่ระบุ
 :invalid เปลี่ยนองค์ประกอบ  ทั้งหมดให้เป็นค่าที่ไม่ถูกต้อง
 :lang(language) เปลี่ยนแต่ละองค์ประกอบ 
 ที่มีค่าแอตทริบิวต์ lang ที่ขึ้นต้นด้วย " it "
 :last-child มันเปลี่ยนองค์ประกอบ 
 ทั้งหมดที่เป็นลูกสุดท้ายขององค์ประกอบหลัก
 :last-of-type เปลี่ยนทุกองค์ประกอบ 
 ที่เป็นองค์ประกอบ 
 สุดท้ายขององค์ประกอบหลัก
 :link เปลี่ยนลิงก์ที่ไม่ได้เยี่ยมชมทั้งหมด
 :not(selector) เปลี่ยนทุกองค์ประกอบที่ไม่ใช่องค์ประกอบ 
 :nth-child(n) เปลี่ยนแต่ละ 
 องค์ประกอบที่ได้รับการสั่งซื้อจากองค์ประกอบหลัก
 :nth-last-child(n) เปลี่ยนแต่ละองค์ประกอบ 
 ที่เรียงลำดับจากองค์ประกอบหลักโดยนับจากลูกสุดท้าย
 :nth-last-of-type(n) เปลี่ยนแต่ละองค์ประกอบ 
 ที่เป็นองค์ประกอบ 
 ที่สองจากผู้ปกครอง นับจากลูกสุดท้าย
 :nth-of-type(n) มันเปลี่ยนทุกองค์ประกอบ 
 ที่เป็นองค์ประกอบ 
 ที่สองขององค์ประกอบหลัก
 :only-of-type เปลี่ยน 
 องค์ประกอบที่เป็นองค์ประกอบเดียว 
 จากองค์ประกอบหลัก
 :only-child มันเปลี่ยนทุก 
 องค์ประกอบที่เป็นลูกเดียวขององค์ประกอบหลัก
 :optional เปลี่ยนองค์ประกอบ  โดยไม่มีแอตทริบิวต์ "required"
 :out-of-range เปลี่ยน  องค์ประกอบที่มี atr        
        
ขยาย

    



    

        

            ข้อมูลเพิ่มเติม
        

        
    





    

        

            แอปที่เกี่ยวข้อง
        

        
    





    

        

            แนะนำสำหรับคุณ
        

        
    






    

        

            ข้อมูลที่เกี่ยวข้อง
            ทั้งหมด