form表单

最新推荐文章于 2022-10-22 11:03:02 发布

弓长九日。。

最新推荐文章于 2022-10-22 11:03:02 发布

阅读量177

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/weixin_51746436/article/details/117223557

版权

form表单

表单可以用于采集用户的信息，表单由文本域，单选框，多选框，下拉列表，按钮等组成。

	<form >
	</form>

form表单的属性

1.action用于页面的跳转

	<form action="#">  #代表跳转的路径
	</form>

2.methon用于提交表单的提交方式

	<form action="#" method="请求方式"> 请求方式主要有get和post。get是默认的请求方法适合用于提交少量数据，但不安全。post更加安全
	</form>

form中的标签

1.input是表单中很重要的作用

1.1input会根据type属性的值有不同的作用

<form method="post" action="#">
<p>用户名：<input type="text" name="urename" </p>     type="text"文本框
<p>密码：<input type="password" name="pud" autofocus></p>     type="password"密码框 
                                autofocus -------- 当页面打开的时候，会自动获取光标
<p>请输入你性别：<input type="radio" name="man" value="男" checked="checked">男 
<input type="radio" name="w" value="女">女     type="radio"单选按钮
</p>
<p>请输入您的爱好：<input type="checkbox" name="love" value="足球">足球
<input type="checkbox" name="love" value="篮球">篮球
<input type="checkbox" name="love" value="lol">lol
<input type="checkbox" name="love" value="韩剧">韩剧
<input type="checkbox" name="love" value="王者荣耀">王者荣耀    type="checkbox"多选按钮
</p>
<P>邮箱：<input type="email"  placeholder="请输入你的邮箱"></P>   type="email" 邮箱框
<P>用户头像：<input type="file" ></P>       type="file" 选择文本
</form>

<input type="button" value="普通按钮">    type="button"普通按钮
<input type="reset"  value="重置">        type="reset"重置按钮
<input type="image"  value="图片按钮">    type="image"图片按钮
<input type="submit" value="提交按钮"     type="submit" 提交按钮

2.select标签

select下拉选择框

<p>您的家庭地址是：
<select>
<option>西安</option>
<option>曹县</option>
</select></p>

3.textarea 标签

textarea多行文本框

<p>请留下你的意见或建议：<textarea cols="10" rows="10" placeholder="请留下你的意见或建议"></textarea></p>

该上所以代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
<div align="center">
<form method="post" action="#">
<p>用户名：<input type="text" name="" value=""></p>
<p>密码：<input type="password" name="" autofocus></p>
<p>请输入你性别：<input type="radio" name="man" value="男" checked="checked">男
<input type="radio" name="w" value="女">女
</p>
<p>请输入您的爱好：<input type="checkbox" name="love" value="足球">足球
<input type="checkbox" name="love" value="篮球">篮球
<input type="checkbox" name="love" value="lol">lol
<input type="checkbox" name="love" value="韩剧">韩剧
<input type="checkbox" name="love" value="王者荣耀">王者荣耀
</p>
<P>邮箱：<input type="email"  placeholder="请输入你的邮箱"></P>
<P>用户头像：<input type="file" ></P>
<p>您的家庭地址是：<select><option>西安</option>
<option>曹县</option>
</select></p>
<p>您的收货地址：<select multiple="multiple">
<option>请你选择收货地址</option>
<option>永川</option>
<option selected="selected">江北</option>
<option>万州</option>
</select></p>
<p>请留下你的意见或建议：<textarea cols="10" rows="10" placeholder="请留下你的意见或建议"></textarea></p>
<p>请你选择喜欢的颜色：<input type="color" ></p>
<p>请你选择数字：<input type="number" max="10" min="1"></p>
<p>请输入你的生日：<input type="date" ></p>
<p>获取本地时间：<input type="datetime-local"></p>
</form>

</div>
	
</body>
</html>

运行结果如下