Some simple implementation codes of the form element take registration as an example
 Code implementation: Copy code The code is as follows:<!DOCTYPE html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta charset="utf-8"> <style type="text/css"> div{ width:35%;margin-left:32%;} </style> </head> <body> <div> <form class="f1" action="http://www.baidu.com" method="get" > <fieldset> <legend>Registration form</legend> <table width=100% > <tbody> <tr ><td class="left" width=40% align="right"><label for="t1">Name:</label></td> <td class="right"><input type="text" id="t1" name="Name"></td> </tr> <tr><td class="left" width=40% align="right"><label for="Password1">Password:</label></td> <td class="right"><input id="Password1" type="password" name="Password" /></td> </tr> <tr><td class="left" width=40% align="right"><label for="e1">E-mail:</label></td> <td class="right"><input type="email" id="e1" name="youxiang" ></td> </tr> <tr><td class="left" width=40% align="right"><label for="1">Gender:</label></td> <td class="right"><input type="radio" id="1" name="ssex" value="nan" />Male<!-- Just set the name to the same --> <input type="radio" id="2" name="ssex" value="nv" />Female </td> </tr> <tr><td class="left" width=40% align="right">Region:</td> <td><select id="selc" name="place"> <option value="quanzhou">Quanzhou</option> <option value="xiamen">Xiamen</option> <option value="zhangzhou" >Zhangzhou</option> </select> </td> </tr> <tr><td class="left" width=40% align="right"><label for="txtarea">Introduction:</label></td> <td><textarea id="txtarea"></textarea></td> </tr> <tr><td class="left" width=40% align="right">Interests:</td> <td><input type="checkbox" id="cbox1" name="dushu" value="c1">Reading <input type="checkbox" id="cbox2" name="yundong" value="c2">Sports <input type="checkbox" id="cbox3"name="chihe" value="c3">Eat and drink </td> </tr> <tr><td class="left" width=40% align="right">Upload:</td> <td> <input type="file" id="f1" name="shangchuan" value="File1" /></td> </tr> <tr><td class="left" width=40% align="right" rowspan=2> <input id="Submit1" type="submit" value="Submit" /> </td> <td> <input id="Reset1" type="reset" value="Reset" /> </td> </tr> </tbody> </table> </fieldset> </form> </div> </body> </html> Note that the function implemented by the code label is to make the mouse automatically focus on the text box when clicking the text! Copy code The code is as follows:<label for="t1">Name:</label> |
<<: CSS uses calc() to obtain the current visible screen height
>>: Explanation of the working principle and usage of redux
Recommend
Solve the problem of using linuxdeployqt to package Qt programs in Ubuntu
I wrote some Qt interface programs, but found it ...
How to elegantly back up MySQL account information
Preface: I recently encountered the problem of in...
How to solve the timeout during pip operation in Linux
How to solve the timeout problem when pip is used...
Comparing the performance of int, char, and varchar in MySQL
There are many seemingly true "rumors" ...
Copy fields between different tables in MySQL
Sometimes, we need to copy a whole column of data...
Detailed explanation of how to use the vue verification code component
This article example shares the specific implemen...
Installation, configuration and use of process daemon supervisor in Linux
Supervisor is a very good daemon management tool....
Vue implements graphic verification code login
This article example shares the specific code of ...
12 Javascript table controls (DataGrid) are sorted out
When the DataSource property of a DataGrid control...
What magical uses does CSS filter have
background Basic Concepts CSS filter property app...
JavaScript message box example
Three types of message boxes can be created in Ja...
Solution to the horizontal scroll bar in iframe under IE6
The situation is as follows: (PS: The red box repr...
Nginx server https configuration method example
Linux: Linux version 3.10.0-123.9.3.el7.x86_64 Ng...
Use Vue3 to implement a component that can be called with js
Table of contents Preface 1. Conventional Vue com...
Sample code for separating the front-end and back-end using FastApi+Vue+LayUI
Table of contents Preface Project Design rear end...