html交互

最新推荐文章于 2023-03-29 11:31:21 发布

gogolaile

最新推荐文章于 2023-03-29 11:31:21 发布

阅读量1.2k

点赞数

分类专栏： 3.Web ----html 文章标签： html

本文链接：https://blog.csdn.net/gogolaile/article/details/60766216

版权

3.Web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

----html

5 篇文章 0 订阅

订阅专栏

和用户交互要用到控件，这些控件要放在<from>表单里用户点击的数据才能提交

from有两个属性：action:用户输入的数据会被提交的目的地

method:表示提交的方式（有get和post）

控件一般有1.文本输入框<input>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body> 
     <form action="save.php" method="post" >
        <input type="text"  name="text" value="m"/>
     <hr />
     <input type="password" name="password" value="1"/>
     </form> 
	</body>
</html>

type 为text表示文本输入框，为password表示密码输入框

name作为标识给后台用

value表示默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body> 
     <form action="save.php" method="post" >
<input type="text" value="1" name="1" />
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
</form>
	</body>
</html>

为submit为提交按钮，reset为重置按钮。submit会将内容提交，reset会将内容重置

value为按钮上的字

二。选择框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body> 
     <form action="save.php" method="post" >
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender"  checked="checked"/>
    <hr />
    <label>星期一</label>
    <input type="checkbox" name="Monday " value="星期一" checked="checked" />
    <label>星期二</label>
    <input type="checkbox" name="Tuesday "  value="星期二" checked="checked"/>
    <label>星期三</label>
    <input type="checkbox" name="Wednesday "  value="星期三"/>
     </form> 
	</body>
</html>

type 为radio时表示单选框，注意同一组单选框name需一致

为checkbox为复选框

value为提交到PHP的值 checked表示默认选中

三。下拉选择框<select>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body> 
     <form action="save.php" method="post" >
<label>选择日期：</label>
<select>
	<option value="星期一">星期一</option>
	<option value="星期二" selected="selected">星期二 </option>
	<option value="星期三">星期三</option>
</select>
     </form> 
	</body>
</html>

option表示选项 selected表示默认选中

四。文本域<textarea>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body> 
     <form action="save.php" method="post" >
     <textarea cols="4" rows="10">写点东西吧。。。。</textarea>
     </form> 
	</body>
</html>

cols表示4列，rows表示10行，标签间的内容表示默认显示的内容

注意：lable标签的for与控件的id一致，点击标签就可以影响控件

gogolaile

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html交互

和用户交互要用到控件，这些控件要放在表单里用户点击的数据才能提交from有两个属性：action:用户输入的数据会被提交的目的地 method:表示提交的方式（有get和post）控件一般有1.文本输入框 type 为text表
复制链接

扫一扫