HTML表单常用标签


名称
用例
备注

文
本
输入框
<input type="text" name="uname" value="" placeholder="请输入您的用户名" />
placeholder:提示信息

<input type="text" name="realname" value="无名"/>
value:默认值

密
码
输
入
框
<input type="password" name="pwd" value="" />

单
选
按
钮
<input type="radio" name="gender" value="1" />男

<input type="radio" name="gender" value="2"checked="checked" />女

<input type="radio" name="gender" value="3" />未知
checked="checked"

默认选择

多
选
按
钮
<input type="checkbox" name="fav" value="1" />刘备<inputtype="checkbox" name="fav" value="2" />关羽

<input type="checkbox" name="fav" value="3"checked="checked" />张飞

<input type="checkbox" name="fav" />赵云

选
择
数
字
<input type="number" name="age" value="18" min="16"max="60" />

下
拉
列
表
<select name="address">

<option value="1">山东省</option>

<option value="2" selected="selected">北京市</option>

<option value="3">河北省</option>

<option value="4">河南省</option>

<option value="5">安徽省</option>

<option value="6">福建省</option>

<option value="7">湖南省</option>

<option value="8">湖北省</option>

<option value="9">新疆维吾尔族自治区</option>

</select>
selected="selected"

默认显示,不选择,不提交

<select name="un" multiple="multiple"size="2">
可以多选; size显示的数量
 
     

时间
<input type="date" name="birthday" />
Type:可以换属性

颜色
<input type="color" name="cc" />

文件上传
<input type="file" name="photo" />

长文本
<textarea name="introduce" rows="5" cols="50">默认值显示...</textarea>

图片
<input type="image" src="img/123.jpg" width="100px" />

按钮
<input type="submit" value="提交" />

<input type="reset" value="重置" />

<input type="button" value="普通按钮" onclick="alert(‘功能有待实现‘);" />

实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>form表单练习</title>

</head>

<body>

<h1>注册页面</h1>

<form action="reallove" method="get">

<table border="1" cellspacing="0" width="600px">

<tr>

<th width="200px">用户名</th>

<td width="400px">

<input type="text" name="uname" value="" placeholder="请输入您的用户名" />

</td>

</tr>

<tr>

<th>密码</th>

<td>

<input type="password" name="pwd" value="" />

</td>

</tr>

<tr>

<th>确认密码</th>

<td><input type="password" name="pwd2" value="" /></td>

</tr>

<tr>

<th>真实姓名</th>

<td>

<input type="text" name="realname" value="无名" />

</td>

</tr>

<tr>

<th>身份证号</th>

<td>

<input type="text" name="idcard" value="" />

</td>

</tr>

<tr>

<th>性别</th>

<td>

<input type="radio" name="gender" value="1" />男

<input type="radio" name="gender" value="2" checked="checked" />女

<input type="radio" name="gender" value="3" />未知

</td>

</tr>

<tr>

<th>婚姻状况</th>

<td>

<input type="radio" name="marry" value="1" />已婚

<input type="radio" name="marry" value="2" checked="checked" />未婚

<input type="radio" name="marry" value="3" />离婚

</td>

</tr>

<tr>

<th>爱好</th>

<td>

<input type="checkbox" name="fav" value="1" />刘备

<input type="checkbox" name="fav" value="2" />关羽

<input type="checkbox" name="fav" value="3" checked="checked" />张飞

<input type="checkbox" name="fav" />赵云

</td>

</tr>

<tr>

<th>年龄</th>

<td>

<input type="number" name="age" value="18" min="16" max="60" />

</td>

</tr>

<tr>

<th>户籍地址</th>

<td>

<select name="address">

<option value="1">山东省</option>

<option value="2" selected="selected">北京市</option>

<option value="3">河北省</option>

<option value="4">河南省</option>

<option value="5">安徽省</option>

<option value="6">福建省</option>

<option value="7">湖南省</option>

<option value="8">湖北省</option>

<option value="9">新疆维吾尔族自治区</option>

</select>

</td>

</tr>

<tr>

<th>学历</th>

<td>

<select name="un" multiple="multiple" size="3">

<option value="1">北京大学</option>

<option value="2" selected="selected">清华大学</option>

<option value="3">麻省理工</option>

<option value="4">哈佛大学</option>

<option value="5">剑桥大学</option>

<option value="6" selected="selected">慕尼黑大学</option>

<option value="7">俄罗斯红场大学</option>

<option value="8">牛津大学</option>

<option value="9">北京尚学堂</option>

</select>

</td>

</tr>

<tr>

<th>收入</th>

<td>

<select name="money">

<option value="1">10000-19999</option>

<option value="2">20000-50000</option>

<option value="3">50000以上</option>

</select>

</td>

</tr>

<tr>

<th>出生日期</th>

<td>

<input type="date" name="birthday" />

</td>

</tr>

<tr>

<th>幸运色</th>

<td>

<input type="color" name="cc" />

</td>

</tr>

<tr>

<th>上传照片</th>

<td>

<input type="file" name="photo" />

</td>

</tr>

<tr>

<th>个人介绍</th>

<td>

<textarea name="introduce" rows="5" cols="50">我是默认值...</textarea>

</td>

</tr>

<tr>

<th>图片</th>

<td>

<input type="image" src="img/ly.jpg" width="100px" />

</td>

</tr>

<tr>

<th>联系方式</th>

<td>

<input type="text" name="areacode" value="" size="4" maxlength="4" /> -

<input type="text" name="phonenum" value="" />

</td>

</tr>

<tr>

<th>验证码</th>

<td>

<input type="text" name="areacode" value="" size="4" maxlength="4" /> 7788

</td>

</tr>

<tr>

<th colspan="2">

<input type="submit" value="注册" />

<input type="reset" value="重置" />

<input type="button" value="普通按钮" onclick="alert(‘点我干什么?你瞅啥?‘);" />

</th>

</tr>

</table>

</form>

</body>

</html>

时间： 2024-10-09 04:35:57

HTML表单常用标签的相关文章

html5 form表单常用标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <!-- 电子邮箱属性. --> <input type="email"> <input ty

表单常用的正则表达式

1.^\d+$ //匹配非负整数(正整数 + 0) 2.^[0-9]*[1-9][0-9]*$ //匹配正整数 3.^((-\d+)|(0+))$ //匹配非正整数(负整数 + 0) 4.^-[0-9]*[1-9][0-9]*$ //匹配负整数 5.^-?\d+$ //匹配整数 6.^\d+(\.\d+)?$ //匹配非负浮点数(正浮点数 + 0) 7.^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0

HTML表单提交标签

<form>表单提交标签,设置提交范围 有name属性才能被提交 action:提交的地址url method:提交方式 get方式(默认):会将参数拼接在连接后,有大小限制(4k) post方式:提交后只显示连接,会将参数封装在请求体中,没有这样的限制 name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据.注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值.设置name后URL编码才能转换成人能看的懂的数据 原文地址:

&lt;form&gt;（表单）标签和常用的类型

1.定义和用法 <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素. 表单用于向服务器传输数据. 注释:form 元素是块级元素,其前后会产生折行. 2.form表单的作用 表单在网页中主要负责数据采集功能,也就是和里面包含的数据将被提交到服务器或者电子邮件里.一个表单有三个基本组成部分:表单标签:这里面包含了处理

HTML 表单常用的代码元素

表单: 将数据通过浏览器提交到服务器的媒介.<form action="" method="get/post" ></form> get 提交有长度限制 post 提交无长度限制 一般常用post  表单元素:12个 1.文本类1).<input type="text" value=""> - 文本框 在文本框中输入内容.... 2).password - 密码框 3).<textar

WEB前端开发学习----3.HTML表单form标签

什么是表单? 表单就是用来搜集不同类型的用户输入.比如我们登录时输入的登录名,密码.再比如我们点击登录按钮,删除按钮等等都算是表单. 表单是一个包含表单元素的区域,包括文本域,下拉菜单,复选框,单选框等等. 在html文档中,我们使用<form></form>标签来包含表单元素. form标签有两个属性需要注意下,一个是action, 另一个是method. action ="目的地"   表示将用户输入的数据将被传送到指定位置.比如一个网页. method=&

学习12 互动表单的标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>表单标签</title> </head> <body> <form> <label for="username">用户名

表格、表单相关标签的简单介绍 我的总结

表格 <caption>表格标题,显示在整个表格外面</caption> <th>表格每一列的标题</th> <tr>行</tr> <td>列 单元格</td> 表格的属性 table{ border-collapse:collapse;将单元格边框合并} colspan:合并列 rowspan:合并行; cellpading:单元格内填充 cellspacing:单元格外边距;[直接写在table标签里面]

注册表单常用验证方式

一..net中有多种方法 1.引用<script src="Scripts/jquery.validate.js"></script> <script src="Scripts/jquery.validate.unobtrusive.js"></script> 在需要验证的input标签上添加属性data-val="true",即表示改标签参加验证. 继续在标签上添加属性data-val-requi