前端专题表单的基本使用

最新推荐文章于 2023-05-03 18:32:47 发布

极光雨雨

最新推荐文章于 2023-05-03 18:32:47 发布

阅读量166

点赞数

分类专栏： # H5 CSS JS基础文章标签： html

本文链接：https://blog.csdn.net/weixin_44131922/article/details/107874833

版权

H5 CSS JS基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

表单的理解

表单和一个问卷调查一样，可以将用户选择的和填写的内容整合成一套数据发送给我们的后台服务器，让服务器内部代码对数据进行操作并可以给与用户一定的反馈内容。

标签：
属性：method
值：get、post
Action：提交的服务器地址，写法之前img src指向某一路径

表单内的元素
Input标签
属性：
Name：元素名称，传输数据是根据name的属性传输的
Id：就是id
Type:
Text:普通文本框，默认就是type=“text”
Password：密码
Radio：单选按钮
Button ：普通按钮
Checkbox:复选框
Image：图片按钮也会将表单提交
Number:输入的只能数字
Hidden:隐藏
File:文件上传
Submit：提交
Reset：重置回到表单最原始状态
禁用：disable 传不到后台
只读：readonly可以传到后台
Placeholder：提示语

Textarea:多行文本，比如输入的是一段话，自我介绍
Cols:列数(宽度)
Rows:行数(高度)

Select:下拉选择框
  Option  选项

Checked: 复选和单选默认被选中
Selected:下拉选项默认被选中
案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--表单-->      <!--数据的传输用到name属性 和 部分value-->
		<form action="#" method="get">
		 <!-- #表示提交到当前页面，由于使用了get可以在地址栏内看到提交的数据，也可以按F12打开开发者模式查看响应参数 -->
		<!--get会将信息显示出来--><!-- 一般不建议省略-->
			<fieldset>													<!--提示-->
				UserName<input type="text" name="user"  placeholder="Input the name"/><br />		<!--type不写的话 m默认为text -->
				Password<input type="password" /><br />
				<!--默认选项-->
				Sex male<input type="radio" checked="checked" name="sex" value="male" />
				female<input type="radio" name="sex" value="female"/><br />
			</fieldset>
			
			Hobby<input type="checkbox" name="1" />AAA
			<input type="checkbox" name="1" checked="checked" />BBB <!--默认-->
			<input type="checkbox" name="1" />CCC<br />
			Color<input type="color" name = "color"/><br />
			Range<input type="range" /><br />
			Email<input type="email" name="email"/><br />
			Tel<input type="tel" /><br />
			
			<br />							<!--multiple 可以选择多个文件-->
			FileUpLoad <input type="file" / multiple="multiple"><br />
			Number <input type="number" min="0" max="100" name="number" /><br />
			Hidden <input type="hidden" /><br />		<!--常用-->
			禁用 <input type="text" disabled="disabled" value="432342" /><br />
			只读<input type="text"  readonly="readonly"/ value="read only"><br />
			普通按钮<input type="button" value="noraml button"/><br />
			图片按钮（作用和submit一样）<input type="image" src="../Data8_14/img/1_p.png" width="50" /><br />
			
			自我介绍<textarea name="ta" cols="10" rows = accesskey="10"></textarea><br />
			
			省份<select name="select"> <!--有name属性才能传输到后台，类似映射-->
				<option value="o1">HeNan</option>
				<option selected="selected"> BeiJing</option>	<!--默认选项-->
				<option> ShangHai</option>
			</select>
			<!--禁用传不到后台，只读可以-->
			
			<input type="submit" value="submit" />
			<input type="reset" value="reset" />
		</form>
	</body>
</html>

极光雨雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端专题表单的基本使用

表单的理解表单和一个问卷调查一样，可以将用户选择的和填写的内容整合成一套数据发送给我们的后台服务器，让服务器内部代码对数据进行操作并可以给与用户一定的反馈内容。标签：属性：method值：get、postAction：提交的服务器地址，写法之前img src指向某一路径表单内的元素Input标签属性：Name：元素名称，传输数据是根据name的属性传输的Id：就是idType:Text:普通文本框，默认就是type=“text”Password：密码Radio：单选按
复制链接

扫一扫