html表单,表单域

最新推荐文章于 2024-02-06 14:41:05 发布

一个半路出家的人

最新推荐文章于 2024-02-06 14:41:05 发布

阅读量5.3k

点赞数 2

分类专栏：前端Html Html 文章标签：表单表单域 html

本文链接：https://blog.csdn.net/qq_42039281/article/details/81912695

版权

前端Html 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

Html

6 篇文章 0 订阅

订阅专栏

一,基本的表单标签及属性

input 标签输入表单

属性:text 定义输入文本

radio定义单选按钮同组单选按钮 name属性值必须统一这样才能实现单选,(checked="checked"可以设定初始值)

checkbox 复选框

button普通按钮,可以通过value设定按钮显示名称

submit提交按钮

reset重置按钮

file 文件域:可以提交文件

image属性可以设置图片提交按钮, 后面紧跟src属性,定义图片的路径

textarea标签

文本域 cols="30" rows="20" 这两个属性可以定义文本域的行和列

lable标签

用于绑定表单元素,当点击label标签的时候,被绑定的表单就会获得输入焦点通过id值绑定

<label for="account">请输入账户:</label>
<input type="text" id="account">

fieldset标签

通过fieldse定义带有边框的文本域

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		请输入用户名:<input type="text">
		<br>
		请输入密码: <input type="password">
		<br>
		请选择性别: <input type="radio" name="sex">男		
					<input type="radio" name="sex">女
		<br>
		<!-- 多选按钮 -->
		请选择你的爱好: <input type="checkbox">篮球
						<input type="checkbox">吉他
						<input type="checkbox">唱歌
						<input type="checkbox">做饭
						<br>
	    请选择你的出生年份: <select name="" id="">
		    					<option value="1994">1994</option>
		    					<option value="1995">1995</option>
		    					<option value="1996">1996</option>
		    					<option selected="selected" value="1997">1997</option>
		    					<option value="1998">1998</option>
	                        </select>
	                        <br>
	       <!-- 提交按钮 -->
	       <input type="submit" value="登录">
	       <!-- reset按钮 -->
	       <br>
	       <input type="reset" value="重新设定">
	       <!-- 文件域 -->
	       <br>
	       请选择文件:<input type="file">
	       <!-- 文本域 -->
	       <br>
	       <textarea name="请在此处输入文字" id="" cols="30" rows="10"></textarea>
			<!-- 带有边框的文本域 -->
			<fieldset>
				<legend>健康信息</legend>
				身高: <input type="text">
				体重: <input type="text">
			</fieldset>
			<br>
			<br>
			<!-- 图片形式的提交按钮 -->
			<input type="image" src="login.png">

			<br>
			<br>
			<!-- 文本域 -->
			<textarea name="请在此处输入文字" id="" cols="30" rows="10">
                        </textarea>
	</body>
</html>

二,表单域

form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,发form中的所有内容都会被提交给服务器.

form标签的属性 action="url地址" method="提交方式" name="表单名字"

1. Action在表单收集到信息后，需要将信息传递给服务器进行处理，
action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式，其取值为get或post。
3. name用于指定表单的名称，以区分同一个页面中的多个表单。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单域</title>
</head>
<body>
	<!-- 表单元素域,可以向后台传表单数据,method 提交方式 -->
	<form action="url" method="pos" name="user">
		请输入用户名:<input type="text">
		<br><br>
		请输入密码: <input type="password">
		<br><br>
		请选择性别: <input type="radio" name="sex">男		
					<input type="radio" name="sex">女
		<br><br>
		<!-- 多选按钮 -->
		请选择你的爱好: <input type="checkbox">篮球
						<input type="checkbox">吉他
						<input type="checkbox">唱歌
						<input type="checkbox">做饭
						<br><br>
	    请选择你的出生年份: <select name="" id="">
		    					<option value="1994">1994</option>
		    					<option value="1995">1995</option>
		    					<option value="1996">1996</option>
		    					<option selected="selected" value="1997">1997</option>
		    					<option value="1998">1998</option>
	                        </select>
	                        <br><br>
	       <!-- 提交按钮 -->
	       <input type="button" value="普通按钮">
	       <input type="submit" value="确提交">
	       <!-- reset按钮 -->
	       <br><br>
	       <input type="reset" value="重新设定">

	       <br>
	       <br>
	       <!-- 添加图片按钮 -->
	       <input type="image" src="./login.png">
	       <br>
	       <br>

	       <!-- maxlength 允许控件输入的最多字符数 -->
	       请输入身份证号码:<input type="text" maxlength="18">


	       <!-- label标签 用于绑定表单元素,当点击label标签的时候,被绑定的表单就会获得输入焦点-->
	       <br><br>
	       <label for="account">请输入账户:</label>
	       <input type="text" id="account">
	       <br>
	       <label for="male">Male</label>
			<input type="radio" name="sex" id="male" />
			<br />
			<label for="female">Female</label>
			<input type="radio" name="sex" id="female" />
	</form>
</body>
</html>

一个半路出家的人

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
html表单,表单域

一,基本的表单标签及属性 input 标签输入表单属性:text 定义输入文本 radio定义单选按钮同组单选按钮 name属性值必须统一这样才能实现单选,(checked="checked"可以设定初始值) checkbox 复选框 button普通按钮,可以通过value设定按钮显示名称 submit提交按钮...
复制链接

扫一扫