前端开发（表单标签）

ゞ浴缸里的玫瑰 2021-12-12 14:25 283阅读 0赞

## 前端开发（表单标签） ##

## **表单标签** ##

今天就以代码为主吧，主要是表单的一些属性和用法。

*  **作用**：收集数据，用于与服务器交互

**对于input标签中的type属性：**  
|text | --------------------------------- |文本框  
|password-- ------------------------ |-密码框-|  
|-radio-|------------------------------- 单选按钮，应成组使用|  
| checkbox ----------------------- — | 复选框，可独立使用 |  
file-------------------------------------文件域  
hidden-------------------------------隐藏域，相当于一个浏览者看不到的文本框  
submit-------------------------------提交按钮，用于表单填写完成，将表单所有数据提交到服务 器  
reset----------------------------------重置按钮，用于将表单所有数据恢复到初始状态  
button--------------------------------自定义命令按钮，没有任何的内置行为，可借助于js交半年来定义其行为  
image-------------------------------图像按钮，功能与submit相同，但显示为图像

**Input标签属性：**  
type---------------------------------表示元素的类型  
id------------------------------------标签在整个页面中的唯一标示符  
name-------------------------------表单元素的名称，只有设置了name属性的表单元素才能参与表单提交，对于一组单选按钮来说，只有将所有的name值设置为相同，才能进行单选  
value------------------------------表单元素的值，就是他表示的数据，  
size-------------------------------一般用于文本框和密码框，表示宽和高  
maxlength----------------------一般用于文本框和密码框，表示他们可以接受的最多字符  
checked------------------------只用于单选按钮和复选框，  
src-------------------------------只用于图像按钮，设置图像文件的地址，  
alt--------------------------------只用于图像按钮，设置图像的替代文字

接下来就是针对以上的属性代码示例

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>表单标签</title>
    	</head>
    	<body>
    		
    		<form action="" method="get">
    			
    			
    			<input type="text" name="标示数据字段" id="表示元素在这个页面中的唯一标示符" value="按钮" />
    			<br />
    			
    			<input type="password" name="" id="" value="" />
    			<br />
    			
    			<input type="button" name="66" value="1" />
    			<br />
    			
    			<textarea></textarea>
    			<br />
    			
    			<input type="hidden" name="" id="" value="" />
    			<br />
    			
    			
    			
    			<h2>按钮类</h2>
    			<input type="button" name="" id="" value="按钮" />
    			<input type="reset" value="重置按钮" />
    			<input type="submit" name="" id="" value="提交" />
    			<h2>选框类</h2>
    			
    			单选框
    			<input type="radio" name="sex" id="1" value="女" />女
    			<input type="radio" name="sex" id="2" value="男" />男
    			<br />
    			
    			复选框
    			<input type="checkbox" name="" id="1" value="" />篮球
    			<input type="checkbox" name="" id="2" value="" />足球
    			<input type="checkbox" name="" id="3" value="" />好球
    			<br />
    		</form>
    		
    	</body>
    </html>

**多行文本的标签，直接上代码**  
属性：cols-------------设置文本域的宽度  
rows--------------------设置文本域的高度  
warp--------------------设置自动换行模式，有三个值，off，virtual，physical

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>作业2</title>
    	</head>
    	<body style="background-color: peachpuff;">
    		<font size="6" color="brown">申请表</font>
    	<form
    		
    			附注<textarea rows="2" cols="15" name="66">请在这里写入附注</textarea><br /><br />
    			
    		</form>
    	</body>
    </html>

**select下拉标签**  
直接上代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>作业2</title>
    	</head>
    	<body style="background-color: peachpuff;">
    		<form action="" method="post">
    			国籍  <select>
    				<option>中    国</option>
    				<option>贵州</option>
    				<option>重庆</option>
    				<option>宁夏</option>
    			</select><br /><br />
    		</form>
    	</body>
    </html>