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

Summary of problems that may occur when using JDBC to connect to Mysql database

First, clarify a few concepts: JDBC: Java databas...

Installation method of mysql-8.0.17-winx64 under windows 10

1. Download from the official website and unzip h...

Detailed explanation of CSS complex selectors and CSS font styles and color attributes

I have learned some basic selectors of CSS before...

In-depth understanding of MySQL long transactions

Preface: This article mainly introduces the conte...

MySQL REVOKE to delete user permissions

In MySQL, you can use the REVOKE statement to rem...

HTML+Sass implements HambergurMenu (hamburger menu)

A few days ago, I watched a video of a foreign gu...

Vue multi-page configuration details

Table of contents 1. The difference between multi...

Solve the problem after adding --subnet to Docker network Create

After adding –subnet to Docker network Create, us...

Complete steps to install MySQL 5.5 on CentOS

Table of contents 1. Preparation before installat...

Detailed explanation of commonly used nginx rewrite rules

This article provides some commonly used rewrite ...

Detailed explanation of the problems and solutions caused by floating elements

1. Problem Multiple floating elements cannot expa...

mysql backup script and keep it for 7 days

Script requirements: Back up the MySQL database e...

Horizontal header menu implemented with CSS3

Result:Implementation Code html <nav class=&qu...

Elements of user experience or elements of web design

System and user environment design <br />Th...

Analysis and explanation of the differences between DIV, Table and XHTML website building

To put it simply, website construction is about &q...