Html5的form表单案例

form表单

应用场景:提供给用户输入的位置
作用:将客户端用户输入的数据送到服务器端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单</title>
	</head>
	<body>
	     <!--action是数据提交的网址,method是动作,其中有get和post,get提交的数据会显示,不安全,post不显示,相对安全-->
		<form action="数据提交的地址" method="post" enctype="multipart/form-data">
			<!--用enctype属性,来标志当前的附件是特殊文件,和普通传递的数据不一样-->
			<!--required当数据为空时,不允许提交 autofocus自动获得焦点  -->
			用户:<input type="text" name="username" value="" autofocus required placeholder="请输入用户名"/><br /><br />
			头像:<input type="file" name="userpic" multiple accept="image/*"><br /><br />
			密码:<input type="password" name="password" value="" placeholder="请输入密码"/><br /><br />
			性别:
			<input type="radio" name="sex" value="男" checked/><input type="radio" name="sex" value="女" /><br /><br />
			年龄:<input type="number" name="age" min="1" max="200"/><br /><br />
			爱好:
			<select name="like" multiple>
				<option value="游泳" selected>游泳</option>
				<option value="健身">健身</option>
				<option value="滑轮">滑轮</option>
				<option value="篮球">篮球</option>	
			</select><br /> <br />
			喜欢的明星:
			<input type="checkbox" name="start"  value="迪丽热巴" />迪丽热巴
			<input type="checkbox" name="start"  value="易烊千玺" />易烊千玺
			<input type="checkbox" name="start"  value="罗志祥" />罗志祥
			<input type="checkbox" name="start"  value="张艺兴" />张艺兴
			<br /><br />
			学历:
			<select name="edu">
				<option value="专科">专科</option>
				<option value="本科">本科</option>
				<option value="研究生">研究生</option>
				<option value="硕士">硕士</option>
				<option value="博士">博士</option>
			</select><br /> <br />
			签名:<textarea name="qianming" rows="5" cols="3"></textarea><br /> <br />
			<!--
				disable 禁止
				readonly 只读
			-->
			邮箱:<input type="email" name="email" value="1140841562@qq.com" disabled /><br /> <br />
			QQ:<input type="number" name="qq" value="" /><br /><br />
			博客:<input type="url" name="url"  /><br /><br />
			年月日:<input type="date" name="date" /><br /><br />
			时分秒:<input type="time" name="time" /><br /><br />
			星期:<input type="week" name="week" /><br /><br />
			月份:<input type="month" name="month"/><br /><br />
			喜欢的颜色:<input type="color" name="color" /><br /><br />
			范围:0<input type="range" value="30" max="100" />100<br /><br />
			<button>这是button按钮</button>
			<input type="submit" value="注册" />
			<input type="reset" value="重置" />
			<input type="image" src="img/.." />
		</form>
	</body>
</html>

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML表单是网页中常用的一种交互元素,用于收集用户的输入数据并提交给服务器进行处理。下面以一个注册表单为例来说明HTML表单的提交过程。 一个简单的注册表单通常包括用户输入用户名、密码和确认密码等字段,并且有一个提交按钮。用户填写完表单后,点击提交按钮,就会触发表单的提交事件。 HTML表单的代码如下: ``` <form action="register.php" method="POST"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required><br> <label for="confirm_password">确认密码:</label> <input type="password" id="confirm_password" name="confirm_password" required><br> <input type="submit" value="注册"> </form> ``` 上述代码中,`<form>`标签定义了一个表单,`action`属性指定了提交数据的目标地址,`method`属性指定了数据提交的方式。 用户填写表单后,点击提交按钮,表单数据将会被封装成一个HTTP请求,并发送给`register.php`文件。`register.php`文件是一个服务器端脚本,用于接收和处理表单数据。 `register.php`文件的代码如下: ```php <?php $username = $_POST['username']; $password = $_POST['password']; $confirm_password = $_POST['confirm_password']; // 进行数据验证和处理 // ... // 返回处理结果给用户 // ... ?> ``` `register.php`文件通过`$_POST`变量获取到表单提交的数据,并进行必要的验证和处理。在实际应用中,我们可以根据具体的需求来处理表单数据,比如将数据存储到数据库中,发送邮件通知等。 最后,`register.php`文件可以向用户返回处理结果,比如显示注册成功或失败的消息。你可以使用`echo`函数输出HTML代码来展示页面。 以上就是一个简单的HTML表单提交案例,它展示了HTML表单的基本使用和数据提交的过程。实际应用中,我们可以根据具体的业务需求来定制表单,并在服务器端对用户提交的数据进行处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值