html表单基础

最新推荐文章于 2023-05-06 19:53:48 发布

我逍遥

最新推荐文章于 2023-05-06 19:53:48 发布

阅读量422

点赞数 1

分类专栏： HTML+CSS+JS javaEE学习进阶文章标签： form 表单表格 html input

本文链接：https://blog.csdn.net/jack0201/article/details/77650487

版权

HTML+CSS+JS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javaEE学习进阶

6 篇文章 0 订阅

订阅专栏

表单：用户搜集用户的信息，比如登录表单的用户名、密码等。

这些信息会提交给服务器来验证。

input标记：

<input type="text" name="username" size="20" disabled="true" value="tom"/>

type="text"：文本输入框；

type="submit"：提交按钮

type="button"：普通按钮

type="reset"：重置按钮

type="password"：密码输入框

type="radio"：单选（checked="checked"默认选则）

type="checkbox"：多选（checked="checked"默认选则）

type="file"：上传文件（必须给form添加enctype="multipart/form-data"）

type="hidden"：隐藏域（默认提交一些内容）

size="20"：最多显示20个字符

name="username"：相当于变量名

disabled="true"：不可编辑

value="tom"：默认值是tom。

非input标记：

<textarea>：多行文本框

<select>:下拉框

form的method方式：

get:默认模式，提交的信息可以在URL中看到。

例如：file:///G:/Java/java_ee/first.html?username=123456&passwd=111111中

有两个变量名，username和passwd是代码中设置name属性的内容。

?username=后面的123456就是提交的用户名。

&passwd=后面的111111就是提交的密码。

post:这种模式提交的信息在URL中看不到。

代码：

<html>
	<head>
		<title>HTML表单基础</title>	
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	</head>
	<body>
		<form method="get">
			<table border="1">
				<tr>
					<td align="right">用户名:</td>
					<td>	
						<!--下面这一句中不添加name的话，系统不会提交这个内容-->
						<input type="text" name="username" size="20" disabled="true" value="tom"/>
					</td>
				</tr>   
				<tr>
					<td align="right">密码:</td>
					<td>	
						<!--下面这一句中不添加name的话，系统不会提交这个内容-->
						<input type="password" name="passwd" size="20"/>
					</td>
				</tr>
				
				<tr>
					<td align="right">性别:</td>
					<td>
						<!--单选框radio-->
						男<input type="radio" name="sex" value="m" checked="checked"/>
						女<input type="radio" name="sex" value="f" />
					</td>
				</tr>
				<tr>
					<td align="right">爱好:</td>
					<td>
						<!--复选框checkbox-->
						足球<input type="checkbox" name="interest" value="footing" />
						做饭<input type="checkbox" name="interest" value="cooking" checked="checked"/>
						钓鱼<input type="checkbox" name="interest" value="fishing" />
					</td>
				</tr>
				<tr>
					<td align="right">照片:</td>
					<td>
						<input type="file" name="imgfile" />
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<!--多行文本编辑框-->
						<textarea name="desc" rows=3" cols="20">
						</textarea>
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<!--下拉框select
							multiple="multiple"可按住Ctrl多选
							selected="true"设置默认选项
						-->
						<select name="city" multiple="multiple">
							<option value="BJ">北京</option>
							<option value="SH">上海</option>
							<option value="XA" selected="true">西安</option>
						</select>
					</td>
				</tr>
				<!--隐藏域-->
				<input type="hidden" name="key" value="somedata" />
				<tr>
					<td colspan="2" align="center">
							<!--提交按钮-->
							<input type="submit" value="注册"/>
							<!--重置按钮-->
							<input type="reset" value="重置"/>	
							<!--普通按钮-->
							<input type="button" value="点我没用"/>	
					</td>
				</tr>
				
			</table>
		</form>
	</body>
</html>

界面如下：

我逍遥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html表单基础

input标记：  <input type="text" name="username" size="20" disabled="true" value="tom"/> type="text"：文本输入框； type="submit"：提交按钮 type="button"：普通按钮 type="reset"：重置按钮 type="password"：密码输入框 type="rad
复制链接

扫一扫