form表单

Fennel tea

已于 2023-07-28 16:30:31 修改

阅读量170

点赞数 1

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

于 2021-10-26 22:30:11 首次发布

本文链接：https://blog.csdn.net/m0_62976216/article/details/120922826

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

form表单中常用的标签----input、textarea、select标签

一、input标签

注：必须在form表单下使用

绝对路径：从盘符开始查找，直到找到文件为止，路径+文件名

file:///C:/Users/%E7%8E%8B/Desktop/demo/demo001.html

相对路径：当前文件和目标文件的相对路径

..\demo001.html

语法结构:

 <form action=""  name=""   method="">

action	跳转的路径
name	表单名字
method	跳转的请求方式

请求方式有 post请求 get请求默认的是get请求

get请求：不安全

post请求：相较于get请求更安全

简单的用户注册界面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>input标签</title>
</head>
<body>
	<h2>用户注册</h2>
	<form>
	<p>用户名:<input type="text" namei="username"></p>
	<p>密码:<input type="password"></p>
	<input type="submit">
   </form>
 </body>
 </html>

运行结果

1. input标签的部分常用属性

属性	值	体现作用
type	text password submit radio checkbox reset button image file hidden email color date datetime-local time range	文本框密码框提交按钮单选按钮多选按钮重置按钮--复位按钮按钮图像按钮上传文件---文件域隐藏域邮箱颜色日期日期+时间时间进度条
readonly	readonly	规定输入段只读不可修改
disabled	disabled	规定input标签禁用--不可点击
autofocus	autofocus	默认光标位置
required	required	提示input不能为空白提交---必须输入的值
src	url	以提交按钮形式显示的图像的 URL
size	number_of_char	输入字段的宽度。
width	pixels %	定义 input 字段的宽度

2、input标签部分常用属性的使用代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>input标签</title>
</head>
<body>
	<h2>用户注册</h2>
	<form>
	<p>用户名:<input type="text" value=""></p>
	<p>密码:<input type="password"></p>
	请选择你的专业请选择你的专业
	<p><input type="radio" name="gender" >机械<!--radio单选-->
	<input type="radio" name="gender" >电信</p>
	</form>
	<form>
	<p>请选择你的爱好:<input type="checkbox" value="fav">跑步<!--checkbox  多选-->
	<input type="checkbox" value="fav">羽毛球 <!--value规定元素值-->
	<input type="checkbox" value="fav">篮球</p>
	<input type="submit" value="上传"><!--上传按钮-->
	<input type="reset" value="提交"><!--提交按钮-->
	<input type="button" value="按钮"><!--按钮-->
	<input tpye="image" src="tupian"><!--图片按钮-->
	<input type="file"><!--文件按钮-->
	<p>请输入你的邮箱:<input type="email"></p><!--邮箱格-->
	<p><input type="color"></p><!--颜色-->
		<p><input type="date"></p><!--日期框-->
		<p><input type="datetime-local"></p><!--日期时间框-->
		<p><input type="time"></p><!--时间框-->
		<p><input type="range">100%</p><!--进度条-->
		<p><input type="url"></p>
		<p>
			请选择你所在的城市:<select >
			<option selected="selected">重庆</option><!--选择框-->
			<option>渝北</option>
			<option>巴南</option>
			<option>北碚</option>
			<option>江津</option>
			</select>
		</p>
	</form>
</body>
</html>

运行效果：

3、部分属性代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册界面</title>
</head>
<body>
	<h2>用户注册</h2>
	<form>
	<p>用户名:<input type="text" name="username" disabled="disabled"></p>
	<p>密码:<input type="password" readonly="readonly"></p>
	<input type="submit">
   </form>
 </body>
 </html>

运行结果