HTML表单

最新推荐文章于 2024-10-08 10:16:40 发布

agdjdbucbdins

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量36

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/agdjdbucbdins/article/details/129973321

版权

本文介绍了HTML中的<form>元素及其重要属性如action和method，详细讲解了GET和POST提交方式的区别。同时，详细讨论了<input>元素的各种类型，包括文本输入、密码框、单选按钮、多选按钮、提交按钮、重置按钮、普通按钮、下拉列表、文件域、多行文本域以及其他各种输入类型如电话、颜色、邮箱等。

摘要由CSDN通过智能技术生成

<form> 元素

HTML 表单用于收集用户输入。

 form：所有需要提交给服务器的数据，都需要写在form中
action:把数据发送给指定的服务器
method:数据提交的方式
form表单的提交方式：get：url可见，数据不安全，传输的数据有大小限制
				post：url不可见，数据安全，理论上没有大小限制 -->

声明doctype

<!doctype html>

头:head

<head></head>

网页标题:title

<title></title>

主题:<body>

<body></body>

标题标签:h1-h6

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>this is heading 1</h1>
		<h2>this is heading 2</h2>
		<h3>this is heading 3</h3>
		<h4>this is heading 4</h4>
		<h5>this is heading 5</h5>
		<h6>this is heading 6</h6>
	</body>
</html>

段落标签<p>

<p></p>

换行<br/>

<br/>

水平线<hr/>

<hr/>

<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

账号：<input type="text"name="account"/><br>

密码框

密码：<input type="password"name="pwd"/><br>

单选按钮输入

<input type="radio"> 定义单选按钮。

性别：<input type="radio"value="男"name="sex"/>男
	<input type="radio"value="女"name="sex"/>女<br>

多选按钮

爱好：<input type="checkbox"value="唱"name="hobby"/>唱
	<input type="checkbox"value="跳"name="hobby"/>跳
	<input type="checkbox"value="rap"name="hobby"/>rap
	<input type="checkbox"value="篮球"name="hobby"/>篮球<br>

提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

<input type="submit"value="提交"/>

重置按钮

<input type="reset" value="重置"/>
<!-- 提交按钮 volue:提交按钮的值 -->

普通按钮

<!-- 普通按钮，无法提交 -->
<input type="button"value="按钮"/>

按钮标签

<button>按钮</button>

下拉列表

<select name="address"> 
		<!-- 下拉列表 selected默认选中
		 如果没有value值，会提交value值没有value提交option中间的值
		 -->
			<option value="1">北京市</option>
			<option>河北省</option>
			<option>河南省</option>
			<option>山东省</option>
			<option>山西省</option>
		</select><br/>

文件域

<!-- 特别注意事项：有文件上传时，必须使用post提交
	 需要在form中添加：enctype="multipart/form-data"
	告诉浏览器，现在提交的是文件-->
	照片：<input type="file"name="photo"/><br>

图片

<input type="image"src="img/812.png"height="50"/>

多行文本域

<textarea name="jj"cols="130"rows="10">这是个人简介</textarea>
</form>

电话框

电话<input type="tel"name="tel"/><br>

颜色框

颜色：<input type="color"name="color"/>

邮箱框

邮箱:<input type="email"name="email"placeholder="请输入邮箱"/><br/>

网址

网址:<input type="url"name="url"/>

数字框

年龄:<input type="number"name="age"
			value="10"/>

滑块

滑块:<input type="range"name="wd"min="-50"max="50"value="0"/><br/>

日期

日期:<input type="date" name="brithday"/><br/>

年月

<input type="month" name="month"/><br/>

周和年

周和年:<input type="week" name="week"/><br/>

时间

时间:<input type="time" name="time"/><br/>

年月日(有时区)

<input type="datetime" name="datetime"><br/>

年月日时分秒(无时区)

<input type="datetime-local" name="time"><br/>

搜索框

搜索:<input type="search"name="srarch"/><br/>

可以搜索自己输入的下拉列表:

<input type="text"list="text-list"name="link"/>
		<datalist id="text-list">
			<option lable="河南"value="河南"><br/>
			<option lable="河北"value="河北"checked><br/>
			<option lable="山西"value="山西"><br/>
			<option lable="山东"value="山东"><br/>
		</datalist><br/>

定义隐藏的输入字段：不会在页面中提示，但是提交数据时会一起提交

<input type="hidden"name="hidden"value="22234"/>

表单属性:

autofocus:自动聚焦<br>
form：关联外部的输入框<br>
required:不能为空<br>
placeholder:输入的提示<br>
只读readonly<br>
禁用disabled<br>
value:默认值
size:规定输入字段的尺寸
datalist可以搜索自己输入内容的下拉<br>
min最小<br>
max最大
最大长度:maxlength
step:步长/属性规定 <input> 元素的合法数字间隔。
height和width属性规定用于image类型的input标签的图像