Html 2

发布于:2025-06-19 ⋅ 阅读:(16) ⋅ 点赞:(0)

一,表单

1.概念:在一个区域中,拥有许多输入和最终组件,可以让用户输入、选择信息,最终将信息传入服务器端

2.常用组件:

(1)<form action = " " methon = "get">

action = "后端服务器地址"

method = "请求方式(提交数据的方式)"

(2)input:

type = "text" 单行文本输入框

        name = "account" 定义组件的名称,向后端提交时使用

        value = ""  组件的值,可以赋初始值,若组件不进行后续赋值,则提交时,提交初始值

        readonly   只读     提交表单时,可以被提交到服务器端

        placeholder = "请输入账号"  输入框提示信息  当输入框输入内容后,提示信息自动消失

        disable  禁用组件    不会提交内容到服务

type = "password"密码框

type = "radio" 单选框

        选择性组件需要给value值(选择哪个,返回哪个选项值)

        单选框通过name分组,name相等为一组

        checked属性可以默认选中一项

type="file" 文件选择框

<select name="province">下拉选择组件

        <option>请选择</option> 选项,可以直接看到

        <option value="101">北京</option> 最终提交选中的选项值

        <option value="102" selected>上海</option>  selected默认选择上海,可修改

多行文本框组件<textarea rows="5" cols="30" name="address">1111</textarea> ,可换行rows,cols设置初始长宽,1111为初始默认值

type="submit"提交按钮 触发表单中的提交(默认值为保存,可修改)

type="reset" 重置,使表单恢复初始状态,不是清空表单

type="button" 普通按钮,没有直接作用 用来触发事件
             value = ""  引号内容为按钮中内容
             onclick = "" 可以在此处调用javaScript中函数

eg:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test(){
				alert("你好");
			}
		</script>
	</head>
	<body>
		
		 <form action="server.html" method="get">
			 账号:<input type="text"  name="account" value="张三" placeholder="请输入账号" readonly="readonly"/><br />
			 密码:<input type="password" name="password"/><br />
			 性别:<input type="radio" name="gender" value="男" checked/>男
			       <input type="radio" name="gender" value="女"/>女<br />
				   
			 是否同意<input type="radio" name="a" value="同意" checked/>同意
					<input type="radio" name="a" value="不同意" />不同意<br />
					
					
			 课程:<input type="checkbox" name="course" value="Java" />Java
				  <input type="checkbox" name="course" value="C" checked/>C
				  <input type="checkbox" name="course" value="SQL" />SQL
				  <input type="checkbox" name="course" value="html" />html<br />
				  
			 附件:<input type="file" name="file"/><br />
			 
			 省份:<select name="province">
				 <option>请选择</option>
				 <option value="101">北京</option>
				 <option value="102" selected>上海</option>
				 <option value="103">陕西</option>
			 </select><br />
			 
			 地址<textarea rows="5" cols="30" name="address">1111</textarea>
			
			 <input type="submit" value="保存"/><br />
			 
			 <input type="reset" />
			
			 <input type="button" value="登录" onclick="test()"/>
		 </form>
	</body>
</html>


网站公告

今日签到

点亮在社区的每一天
去签到