Comprehensive understanding of HTML Form elements

Comprehensive understanding of HTML Form elements

As shown below:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2.   
  3. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  4. < head >   
  5.      < title > Registration Form </ title >   
  6. </ head >   
  7. < body >   
  8.      < form   action = "DoFormAction.htm" >   
  9.          < fieldset   style = "width=800px" >                                                                <!--Border around the registration form-->   
  10.          < legend > Please enter the following information and register </ legend >   
  11.          < table   cellspacing = "0px"   cellpadding = "6px"   border = "1px"   bordercolor = "black"   align = "center"   width = "600px" >   
  12.              < tr >   
  13.                  < td   align = "right" > Username: </ td >                                     <!--Text box-->   
  14.                  < td > < input   type = "text"   size = "20"   style = "width:150px"   /> </ td >   
  15.              </ tr >   
  16.              < tr >   
  17.                  < td   align = "right" > Password: </ td >                                       <!--Password box-->   
  18.                  < td > < input   type = "password"   size = "20"   style = "width:150px"   /> </ td >   
  19.              </ tr >   
  20.              < tr >   
  21.                  < td   align = "right" > Confirm password: </ td >   
  22.                  < td > < input   type = "password"   size = "20"   style = "width:150px"   /> </ td >   
  23.              </ tr >   
  24.              < tr >   
  25.                  < td   align = "right" > Gender: </ td >                                        <!--Single Selection Box-->   
  26.                  < td >   
  27.                      < input   type = "radio"   checked = "checked"   name = "sex1"   value = "Male"   /> Male
  28.                      < input   type = "radio"   name = "sex1"   value = "female"   /> Female
  29.                  </ td >   
  30.              </ tr >   
  31.              < tr >   
  32.                  < td   align = "right" > Gender (click on text to select): </ td >   
  33.                  < td >   
  34.                      < fieldset   style = "width:150px" >                                <!--The form frame can also be set in width via CSS-->   
  35.                      < legend > Please select your gender </ legend >   
  36.                          < input   type = "radio"   checked = "checked"   name = "sex2"   value = "Male"   id = "man"   />   
  37.                          < label   for = "man" > male </ label >   
  38.                          < input   type = "radio"   name = "sex2"   value = "female"   id = "woman"   />   
  39.                          < label   for = "woman" > female </ label >   
  40.                      </ fieldset >   
  41.                  </ td >   
  42.              </ tr >   
  43.              < tr >   
  44.                  < td   align = "right" > City: </ td >                                      <!--Drop-down box-->   
  45.                  < td >   
  46.                      < select   name = "city" >   
  47.                          < option   value = "Beijing" > Beijing </ option >   
  48.                          < option   value = "Shenzhen" > Shenzhen </ option >   
  49.                          < option   value = "Shanghai" > Shanghai </ option >   
  50.                          < option   value = "Nanchang"   selected = "selected" > Nanchang </ option >    <!--Nanchang is selected by default-->   
  51.                      </ select >   
  52.                  </ td >   
  53.              </ tr >   
  54.              < tr >   
  55.                  < td   align = "right" > City location: </ td >   
  56.                  < td >   
  57.                      < select   name = "area" >             
  58.                          < optgroup   label = "Beijing" >                                  <!--Drop-down box group display-->   
  59.                              < option   value = "Chaoyang District" > Chaoyang District </ option >   
  60.                              < option   value = "Haidian District" > Haidian District </ option >   
  61.                              < option   value = "Other Districts" > Other Districts </ option >   
  62.                          </ optgroup >   
  63.                          < optgroup   label = "Nanchang" >   
  64.                              < option   value = "Donghu District" > Donghu District </ option >   
  65.                              < option   value = "West Lake District" > West Lake District </ option >   
  66.                              < option   value = "Qingshan Lake District" > Qingshan Lake District </ option >                                
  67.                          </ optgroup >   
  68.                      </ select >   
  69.                  </ td >   
  70.              </ tr >   
  71.              < tr >   
  72.                  < td   align = "right" > Friendship goal: </ td >   
  73.                  < td >   
  74.                      < select   name = "target"   size = "3"   multiple = "multiple" >          <!--List box-->          
  75.                          < option   value = "Peers"   selected = "selected" > Peers </ option >   
  76.                          < option   value = "Ordinary friends" > Ordinary friends </ option >   
  77.                          < option   value = "lover" > lover </ option >   
  78.                      </ select >   
  79.                  </ td >   
  80.              </ tr >   
  81.              < tr >   
  82.                  < td   align = "right" > Hobbies: </ td >   
  83.                  < td >   
  84.                                                                              <!--Checkbox, note that the name attribute is set the same, grouped-->       
  85.                      < input   type = "checkbox"   name = "love"   value = "football"   /> Football
  86.                      < input   type = "checkbox"   name = "love"   value = "Blue ball"   /> Basketball
  87.                      < input   type = "checkbox"   name = "love"   value = "Ping Pong"   /> Table tennis
  88.                  </ td >   
  89.              </ tr >   
  90.              < tr >   
  91.                  < td   align = "right" > Photo upload: </ td >   
  92.                  < td >   
  93.                                                                              <!--File selection box-->       
  94.                      < input   type = "file"   name = "myPic"   />   
  95.                  </ td >   
  96.              </ tr >   
  97.              < tr >   
  98.                  < td   align = "right" > Self-introduction: </ td >   
  99.                  < td >   
  100.                                                                              <!--Multi-line text box-->       
  101.                      < textarea   rows = "5"   cols = "50" >   
  102.                      </ textarea >   
  103.                  </ td >   
  104.              </ tr >   
  105.              < tr >   
  106.                  < td   align = "center"   colspan = "2" >   
  107.                      < input   type = "submit"   value = "OK"   />   
  108.                      < input   type = "reset"   value = "clear"   />                        
  109.                      < input   type = "image"   src = "../images/btnreg.png"   onclick = "alert('hello')"   />        <!--Demo image button (will submit data, similar to submit)
  110. -->   
  111.                  </ td >   
  112.              </ tr >   
  113.          </ table >   
  114.          </ fieldset >   
  115.      </ form >   
  116. </ body >   
  117. </ html >   

The above is all the content of the comprehensive understanding of HTML Form elements brought to you by the editor. I hope it will be helpful to everyone. Please support 123WORDPRESS.COM~

<<:  Detailed explanation of soft links and hard links in Linux

>>:  Vue button permission control introduction

Recommend

Teach you about react routing in five minutes

Table of contents What is Routing Basic use of pu...

Pure CSS to achieve the text description of semi-transparent effect when the mouse is placed on it (must read for novices)

The effect is as follows: Example 1 Example 2: Ta...

Vue commonly used high-order functions and comprehensive examples

1. Commonly used high-order functions of arrays S...

Related commands to completely uninstall nginx under ubuntu16.04

nginx Overview nginx is a free, open source, high...

Implementing a simple calculator based on JavaScript

This article shares the specific code of JavaScri...

Introduction to Linux and the most commonly used commands (easy to learn, but can solve more than 95% of the problems)

Linux is currently the most widely used server op...

Example of how to implement underline effects using Css and JS

This article mainly describes two kinds of underl...

Some major setting modification records when upgrading from kubernetes1.5.2 to kubernetes1.10

This article records some major setting changes w...

Recommend some useful learning materials for newbies in web design

Many people also asked me what books I read when ...

CSS to achieve Cyberpunk 2077 style visual effects in a few steps

background Before starting the article, let’s bri...

SQL injection vulnerability process example and solution

Code example: public class JDBCDemo3 { public sta...

Complete tutorial on installing Apache, MySQL, PHP, LAMP on Ubuntu 18.04

1. Install Apache $ sudo apt update && su...

Several ways of running in the background of Linux (summary)

1. nohup Run the program in a way that ignores th...

Experience in designing a layered interface in web design

Many netizens often ask why their websites always ...

Detailed explanation of React setState data update mechanism

Table of contents Why use setState Usage of setSt...