HTML表单元素基本用法

最新推荐文章于 2023-12-09 10:15:22 发布

T0nyStark

最新推荐文章于 2023-12-09 10:15:22 发布

阅读量809

点赞数 2

分类专栏：基础入门随堂笔记文章标签： html 表单基础入门

本文链接：https://blog.csdn.net/T0nyStark/article/details/72574575

版权

基础入门随堂笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio)、复选框(checkboxes)等等。

表单的标签是<form>：

<form>

表单的输入元素

</form>

--------------------------------------------------------------------------------------------------------------------------------------

表单的输入元素

通常情况下表单是使用输入标签<input> 他是一个自闭和标签

输入的类型是由type定义的，通常使用的有：

文本输入框：<input type="text">

密码输入框：<input type="password">

单选框：<input type="radio">

复选框：<input type="checkbox">

搜索框：<input type="search">

滑动条：<input type="range" min="" max="" step="">

颜色框：<input type="color">

日期选择：<input type="date">

邮箱：<input type="email">

数字：<input type="number" min="最小值" max="最大值" step="间隔">

提交按钮：<input type="submit">

重置按钮：<input type="reset">

普通按钮：<input type="button">

图片按钮：<input type="image" src="" width="" height="">

文件域：<input type="file>

下拉列表元素是一个标签组：

</select>

多行文本域：

只读属性：readonly

禁用属性：disabled

隐藏域：

表单的标注：<label></label>

例如：

表单的验证：

placeholder是提请用户placeholder=""

required 如果没有填写内容就不允许提交

pattern 检测输入的内容与正则表达式相匹配 pattern="正则表达式"

下面是一个简单的注册页面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<h2>欢迎注册本页面</h2>
	<form action="iframe的用法.html"method="get"target="_blank"enctype="multi/form-data">
		<p>
			请出入你的用户名：<input type="text"name="username">
		</p>
		<!--没有name就没有就安全？!-->
		<p>
			请输入你的密码：<input type="password"name="psw" placeholder="mima">
		</p>
		<p>请选择你的性别<input type="radio"name="sex"checked="checked">男<input type="radio"name="sex">女
		</p>
		<p>
			请选择感兴趣的标签
			
			<input type="checkbox"name="like"id="sport"><label for="sport">运动</label>
			<input type="checkbox"name="like">音乐
			<input type="checkbox"name="like">唱歌
			<input type="checkbox"name="like">旅行
			<input type="checkbox"name="like">美食
			<input type="checkbox"name="like">睡觉
		</p>
		<p>
			请选择最喜欢的颜色
			<input type="color">
		</p>
		<p>
			请选择出生日期
			<input type="date">
		</p>
		<p>
			请选择您所在的城市：
			<select name="" id="">
				<option value="">武汉</option>
				<option value="">北京</option>
				<option value="">郑州</option>
				<option value="">天津</option>
				<option value="">上海</option>
			</select>
		</p>
		<p>
			个性签名：
			<textarea name="" id="" cols="30" rows="10">展示自己</textarea><!--默认写上去的!-->
		</p>
		<p>
			上传照片
			<input type="file">
		</p>
		<p>
			邮箱
			<input type="email">
		</p>
		<p>
			工资
			<input type="number"min="100" max="1000000" step="500">
		</p>
		<p>
			请输入搜索关键字
			<input type="search"name="">
			<input type="submit" value="GO">
		</p>
		<p>
			滑动条：
			<input type="range"min="0"max="100"step="1">
		</p>
		<p>
			<input type="submit">
			<input type="button"value="点我">
			<input type="reset">
			<input type="image"src="D:\develope\images\16.jpg" alt=""width="100"heiht="25">
		</p>
	</form>
	<form action=""></form>
	<form action=""></form>
</body>
</html>

T0nyStark

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单元素基本用法

HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio)、复选框(checkboxes)等等。表单的标签是：表单的输入元素----------------------------------------------------------------------------------
复制链接

扫一扫