HTML的表单元素

最新推荐文章于 2021-06-03 08:33:28 发布

转载最新推荐文章于 2021-06-03 08:33:28 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Yimi/p/5851895.html

本文详细介绍了HTML中表单元素的基本语法及使用方法，包括文本框、密码框、复选框、单选框等常见输入组件，并通过示例展示了如何构建简单的登录页面。

html的表单元素主要用于让用户输入数据并提交给服务器

基本语法：<form action="url" method="提交的方法，get/post,默认为get">各种元素（输入框，下拉列表，文本域，密码框）</form>

案例1：

空格键用 或用全角

表单元素的格式

type=text(文本框) password（密码框）hidden（隐藏域）

checkbox（复选框）radio（单选框） submit(提交按钮) reset（重置按钮） image（图片按钮）

name给该表单元素取名

action把表单提交给哪个页面

login.html

<html>
<head>
<title>登录页面</title>
</head>
<body>
<h1>登录界面</h1>
<form action="ok.html" method="post">
<!--get登录后地址栏会显示用户名密码不安全  post-->
用户名：<input type="text" name="username"/></br>
密&nbsp;&nbsp;码：<input type="password" name="pwd"/></br>
<input type="submit" value="登录"/>
<input type="reset" value="重新填写"/>
</form>
</body>
</html>

用图片做按钮“登录”的那行改写

<!--<input type="image" src="mm.jpg" />-->

名字<input type="text" name="username"/><br/>
密码<input type="password" name="pwd"/><br/>

************喜欢的水果（复选框）**********<br/>
<input type="checkbox" name="v1">西瓜<br/>
<input type="checkbox" name="v1">西瓜<br/>

************你的性别（单选 name值要相同）**********<br/>
<input type="radio" name="sex1">男<br/>
<input type="radio" name="sex1">女<br/>


************隐藏（用途即可提交数据，同时不影响页面）**********<br/>
<input type="hidden" value="123" name="sal"/>

选择你的出生地：<br/>
<select name="biradd">
<option value="">----请选择----</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
</select><br/>

*************请留言*************<br/>
<textarea cols="30" rows="10">请在这里输入.....</textarea><br/>

*********请选择你要上传的文件*******<br/>
<input type="file" name="myfile">请选择文件</input>