HTML 表单

最新推荐文章于 2025-08-04 15:14:34 发布

原创最新推荐文章于 2025-08-04 15:14:34 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

50 篇文章

订阅专栏

博客介绍了信息技术领域中表单相关内容，包含表单、下拉框、文本域、label标签和表单域等元素，这些都是前端开发中构建用户交互界面的重要组成部分。

一、表单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<!--
	  表达的目的：
	  表单域：
	  input表单控件

	-->
	用户名：<input type="text" name="username" value="zhangsan">  <br/>
	密  码：<input type="password" name="password" maxlength="6"><br/>
	性  别：<input type="radio" name="sex">女<input type="radio" name="sex" checked="checked">男 <br/>

	爱  好：<input type="checkbox" name="sport">足球
	        <input type="checkbox" name="sport">篮球
	        <input type="checkbox" name="sport">游泳<br/>

	<input type="button" name="" value="搜索"> <br/>

	<input type="submit" name="" value="提交表单">  <br/>
	<input type="reset" name="" value="重置表单">  <br/>
	<input type="image" src="../images/san1.jpg"> <!--图片按钮-->
	上传头像：<input type="file" name="myImg">

</body>
</html>

二、下拉框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
</head>
<body>
	籍贯：
	<select>
	    <option>-点击选择你的籍贯-</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
	</select>

	<select>
	    <option>-点击选择你的城市-</option>
        <option>海淀</option>
        <option>朝阳</option>
        <option>通州</option>
        <option>大兴</option>
	</select>

</body>
</html>

三、文本域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本域</title>
</head>
<body>
留言板：<br/>
	<textarea cols="20" rows="10">请输入留言</textarea>
</body>
</html>

四、label标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>label（table）标签的使用</title>
</head>
<body>
	<h3>label标签的使用</h3>
	<!--1.使用label标签包裹-->
	<label>输入账号: <input type="text" name="username"></label>  <br/>
	<!--2.如果label有多个表单 可以通过for id的格式来进行-->
	<label for="two">输入账号: <input type="text" name="username"> <input type="text" name=""  id="two"></label>

</body>
</html>

五、表单域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单域</title>
</head>
<body>
三个域：
   <ul>
    <li>1.文本域  textarea</li>
    <li>2.文件域  input type="file" 上传文件</li>
    <li>3.表单域  form 收集表单控件信息 并提交的</li>
   </ul>
	
	
	
	
<h2>表单域</h2>
	<form action="http://www.baidu.com" method="get">
          <p> 用户名：<input type="text" name="username"></p>
          <p> 密码：<input type="password" name="password"></p>
          <input type="submit" value="提交" >
          <input type="reset" value="重置" >
	</form>
</body>
</html>