表单

最新推荐文章于 2023-09-19 17:31:05 发布

叹！

最新推荐文章于 2023-09-19 17:31:05 发布

阅读量112

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_44721518/article/details/108455225

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文深入探讨了HTML表单的设计原理，包括各种输入类型、表单验证以及如何使用JavaScript增强交互体验。通过实例分析，读者将了解到如何创建响应式、易用的表单，提升用户体验。

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

1.<input>元素
<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y">
常用属性含义：
type属性：指定要加入表项的类型（text,password,checkbox,radio,button,hidden,image,file,submit,reset等）.
name属性：该表项的控制名，主要在处理表单时起作用。
size：输入字段中可见字符数。
maxlength：允许输入的最大字符数。
1.1文字框
<input type="text" name="文本框名">
1.2密码框
<input type="password" name="密码框名">
1.3按钮
1.3.1重置按钮
<input type="reset" name="按钮名">
1.3.2提交按钮
<input type="submit" name="按钮框名">
1.3.3普通按钮
<input type="button" name="按钮框名">
1.3.4图片按钮
<input type="image" name="按钮框名">

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <form>
	   <p>用户名:
	      <input type="text" name="userName" size="18" value="text">
	   </p>
	   <p>密&nbsp;&nbsp 码:
	      <input type="password" name="pass" size="18">
		</p>
		<p>
		   <input type="reset" name="reset" value="重填">
		   <input type="submit" name="register" value="注册">
		   <input type="button" name="return" value="返回">
		 </p>
	</form>
 </body>
</html>

在这里插入图片描述

1.4复选框（checkbox）
<input type="checkbox" name="复选框名" value="提交值" checkbox="checkbox">
1.5单选按钮(radio)
<input type="radio" name="单选按钮" value="提交值" checked="checked">
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <form>
	 关注的最新鞋型:
	      <input type="checkbox" name="newshoe" value="newshoe_1" checked="checked">马丁靴
          <input type="checkbox" name="newshoe" value="newshoe_2" checked="checked">松糕鞋
		  <input type="checkbox" name="newshoe" value="newshoe_3">帆布鞋
		  <input type="checkbox" name="newshoe" value="newshoe_4">凉鞋<br/>
	  最喜欢的鞋型：
	      <input type="radio" name="shoetyope" value="休闲鞋">休闲鞋
		  <input type="radio" name="shoetyope" value="运动鞋" checked="checked">运动鞋
		  <input type="radio" name="shoetyope" value="正装鞋">正装鞋
		  <input type="radio" name="shoetyope" value="户外鞋">户外鞋
	</form>
 </body>
</html>

在这里插入图片描述

1.6隐藏域
<input type="hidden" name="隐藏域名" value="提交值">
1.7文件域
文件域会在页面中创建一个不能输入内容的地址文本框和一个“浏览”按钮。
<input type="file" name="文件域名">
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <form action="" method="post"enctype="multipart/form-data">
	  <p><input type="file" name="files"><br/>
	     <input type="submit" name="upload" value="上传"></p>
	</form>
 </body>
</html>

在这里插入图片描述

1.8选择栏<select>
<select size="x" name=""multiple">
   <option...>...</option>
   <option...>...</option>
   <option...>...</option>
</select>
size:表示在带滚动条的下拉列表中一次可显示的列表项数，默认值为1
name：控制操作名
multiple：加上本项表示可以多选，否则单选。
<option value="默认值"selected="selected">...</option>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <form>
	 调查者年龄
	   <select name="age" size="3">
	     <option value="15岁以下">15岁以下</option>
	     <option value="15-19岁">15-19岁</option>
		 <option value="20-35岁" selected="selected">20-35岁</option>
	     <option value="36-50岁">36-50岁</option>
	     <option value="50岁以上">50岁以上</option>
       </select>
	</form>
 </body>
</html>

在这里插入图片描述

1.9多行文本域<textarea>...</textarea>
<textarea name="文本域名" rows="行数" cols="列数">
初始文本内容
</textarea>
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <form>
	  <h3>留言信息<h3>
	  <textarea name="about" cols="40" rows="4">
	    请写下您的想法！
      </textarea>
	</form>
 </body>
</html>

在这里插入图片描述

1.10表单的高级用法
只读与禁用
只读readonly
禁用disabled
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
   <h2>阅读网络鞋城服务协议<h2>
    <form>
	  <textarea name="content" cols="40" rows="4" readonly="readonly">
	    欢迎阅读服务条款协议，网络鞋城的服务与义务.....
      </textarea><br/><br/>
	  同意以上协议<input name="agree" type="checkbox">
	  <input name="register" type="submit" value="注册" disabled="disabled"/>
	</form>
 </body>
</html>