HTML表单

快乐就好ya

已于 2024-09-09 09:27:44 修改

阅读量487

点赞数 3

分类专栏： HTML 文章标签：前端 html css

于 2024-09-09 09:24:56 首次发布

本文链接：https://blog.csdn.net/m0_63233901/article/details/142046679

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<form>表单

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

<form>表单标签，声明我要写一个表单

<method>提交方式（get/post)post来说相对更安全

<action>提交路径（html页面无法直接向数据库提交，会提交到java)

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

<button>按钮标签

<option>下拉列表（selected默认选中值）

<textarea>多行文本框 cols设置宽度rowss设置高度

name 指定表单元素的名称

size 表单元素的初始宽度

maxlength输入的最大字符数

checked type为radio或checkbox，指定按钮被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>人人网注册页面</title>
	</head>
	<body>
		<form>
		<img src="img/renren_titile.gif" />
		<p>人人网，中国 最真实、最有效的社会平台，加入人人网，找回老朋友，结交新朋友。</p>
		电子邮箱：<input type="text" />
		<br />
		设置密码：<input type="password" />
		<br />
		真实姓名：<input type="text" />
		<br />
		性别：<input type="radio" name="1"checked/>男
		<input type="radio" name="1"/>女
		<br />
		生日：<select name="lb" size="1">
			 <option value="moren" selected >1991</option >
			 </select>年
			 <select name="lb1" size="1">
			 <option value="moren" selected >11</option >
			 </select>月
			 <select name="lb2" size="1">
			 <option value="moren" selected >30</option >
			 </select>日
			 <br />
			 为什么要填写我的生日？
			 <br />
			 我现在：<select name="lb3"size="1">
			 	<option>请选择身份</option>
			 	<option>医生</option>
			 	<option>老师</option>
			 </select>（非常重要）
			 <br />
			 <img src="img/renren_code.gif" />
			 <a href="#">看不清换一张？</a>
			 <br />
			 验证：<input type="text" />
			 <br />
			 <input type="image"src="img/renren.gif" />
		</form>
	</body>
</html>

type文本类型

text文本框

password密码框（输入的时候看不到输入内容）

radio单选框（name名字必须一致，checked默认选择）

checkbox多选框（name名字必须一致，checked默认选择）

button:普通按钮

image: 图片按钮

reset: 重置按钮

submit: 提交按钮

file:文件域（必须在form标签中添加enctype="multipart/form-data"，一般上传头像都是用这个）

email: 邮箱

url: 网址

search: 搜索框

number: 数字框 min最小值 max最大值 step步长（

range: 滑块 min最小值 max最大值 step步长

tel: 电话号

datetime-local: 日期选择

color: 选择颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网易邮箱登录界面</title>
	</head>
	<body>
		<table>
			<tr>
				<td><img src="img/163logo.gif"/></td>
				<td >免费邮 企业邮 VIP邮箱 帮助</td>
			</tr>
			<tr>
				<td ><img src="img/imap.jpg"/></td>
				<td><p><form><fieldset><img src="img/loginIcon.gif"/><strong>普通登录</strong></p>
   			       
          
   					<p>版本：
   			        <select name="列表" size="1">
			 		<option value="moren" selected >非默认</option >
			 		<option value="feimoren" selected>默认</option>
					</select>
   					</p>
					<p>
					<input name="gen" type="radio" value="自动登录" />自动登录
					<input name="gen" type="radio" value="SSL " checked />SSL
					</p>
					<input type="submit"value="登录" />
					<input type="submit" value="注册"/></td></fieldset></form>
			</tr>
			<tr>
	    	    <td><ul>
	    	     <li>163/126/yeah三大免费邮箱均默认开放</li>
	    	     <li>全面支持iPhone/iPad及Android等系统</li>
	    	     <li>客户端、手机与网页，实现发送、阅读邮件</li>
	           </ul></td>
			</tr>
			<tr>
				<td><img src="img/netease_logo.gif" /></td>
				<td>关于网易 免费邮 官方博客 客户服务 隐私政策 网易公司版权所有 &copy;2015-2018</td>
			</tr>	
		</table>
	</body>
</html>

表单的高级应用

隐藏域

<input type="hidden" value="666" name="userid">

只读

<input name="name" type="text" value="张三"  readonly>

禁用

<input type="submit "  disabled   value="保存" >

表单元素的标注

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

id相同，可以点击标注的文本来实现点击选项框的效果

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

文本框输入内容提示

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required规定文本填写内容不为空

placeholder提示词

pattern可以验证规则，符合正则表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			<img src="img/bg_chs.png"/>
			<h1>注册账户</h1>
			<p>
			<label for="1">昵称</label><input type="text" id="1"required pattern="[-\w\u4E00-\u9FA5]{4,10}"/>
			</p>
            <label for="2">密码</label><input type="password" id="2" required pattern="^[\dA-Za-z]{6,16}$"/>
            <p>
            <label for="3">确认密码</label><input type="password" id="3"required   pattern="^[\dA-Za-z]{6,16}$"/>
            </p>
            <label for="4">手机号码</label><input type="tel" id="4" required  pattern="1[3578]\d{9}"/>
            <p>
            <label for="5">邮箱</label><input type="email" id="5"  required/>
            </p>
            <label for="6">年龄</label><input type="text" id="6" required pattern="\d|[1-9]\d|1[0-2]\d"/>
            <p>
            <input type="image"src="img/btn.bmp" />
            </p>
        </form>
	</body>
</html>

快乐就好ya

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML表单

file:文件域（必须在form标签中添加enctype="multipart/form-data"，一般上传头像都是用这个）提交路径（html页面无法直接向数据库提交，会提交到java)checkbox多选框（name名字必须一致，checked默认选择）radio单选框（name名字必须一致，checked默认选择）password密码框（输入的时候看不到输入内容）id相同，可以点击标注的文本来实现点击选项框的效果。表单标签，声明我要写一个表单。
复制链接

扫一扫