Detailed explanation of HTML Form form elements
This time I will bring you a detailed explanation of the HTML Form form elements. What are the precautions when using the HTML Form form elements. The following is a practical case, let's take a look.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注册表单</title>
</head>
<body>
<form action="DoFormAction.htm">
<fieldset style="width=800px"> <!--套住注册表格的边框-->
<legend>请输入如下的信息然后进行注册</legend>
<table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">
<tr>
<td align="right">用户名:</td> <!--文本框-->
<td><input type="text" size="20" style="width:150px" /></td>
</tr>
<tr>
<td align="right">密码:</td> <!--密码框-->
<td><input type="password" size="20" style="width:150px" /></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" size="20" style="width:150px" /></td>
</tr>
<tr>
<td align="right">性别:</td> <!--单选框-->
<td>
<input type="radio" checked="checked" name="sex1" value="男" />男
<input type="radio" name="sex1" value="女" />女
</td>
</tr>
<tr>
<td align="right">性别(可以点文字选择):</td>
<td>
<fieldset style="width:150px"> <!--表单外框，也可以通过css设置宽度-->
<legend>请选择性别</legend>
<input type="radio" checked="checked" name="sex2" value="男" id="man" />
<label for="man">男</label>
<input type="radio" name="sex2" value="女" id="woman" />
<label for="woman">女</label>
</fieldset>
</td>
</tr>
<tr>
<td align="right">城市:</td> <!--下拉框-->
<td>
<select name="city">
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="南昌" selected="selected">南昌</option> <!--默认选择南昌-->
</select>
</td>
</tr>
<tr>
<td align="right">城市所在区域:</td>
<td>
<select name="area">
<optgroup label="北京"> <!--下拉框分组显示-->
<option value="朝阳区">朝阳区</option>
<option value="海淀区">海淀区</option>
<option value="其他区">其他区</option>
</optgroup>
<optgroup label="南昌">
<option value="东湖区">东湖区</option>
<option value="西湖区">西湖区</option>
<option value="青山湖区">青山湖区</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="right">交友目标:</td>
<td>
<select name="target" size="3" multiple="multiple"> <!--列表框-->
<option value="同行" selected="selected">同行</option>
<option value="普通朋友">普通朋友</option>
<option value="爱人">爱人</option>
</select>
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<!--复选框,注意name属性设置一样，分组-->
<input type="checkbox" name="love" value="足球" />足球
<input type="checkbox" name="love" value="蓝球" />蓝球
<input type="checkbox" name="love" value="乒乓球" />乒乓球
</td>
</tr>
<tr>
<td align="right">照片上传:</td>
<td>
<!--文件选择框-->
<input type="file" name="myPic" />
</td>
</tr>
<tr>
<td align="right">自我介绍:</td>
<td>
<!--多行文本框-->
<textarea rows="5" cols="50">
</textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="确定" />
<input type="reset" value="清空" />
<input type="image" src="../images/btnreg.png" onclick="alert('hello')" /> <!--演示图片按钮(会提交数据，类似submit)
-->
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use h5’s sse server to send EventSource events
H5’s local storage and local database details Introducing
#h5 how to implement the remember password function
The above is the detailed content of Detailed explanation of HTML Form form elements. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
