html简易表单_简易表单html-CSDN博客

本文链接：https://blog.csdn.net/zhanghanqmx/article/details/123409556

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <h1>Simple Form</h1>
    <title></title>
</head>
<body>
<form action="../index.html" method="post">
    <input type="hidden" value="2325120277" id="uid" >
    Username:<input type="text" name="username" id="username" placeholder="Please input your userName"/>
    Password:<input type="password" placeholder="Please input your password"/><br/>
    Identification:<input type="password"/><br/>
    Email number:<input type="text"/><br/>
    Cellphone number:<input type="tel"/><br/>
    Profile:<input type="text"/><br/>
    <input type="file"/><br/>
    Gender/Sex:<input type="radio" name="sex"/>male
    <input type="radio" mame="sex">female
    <br/>
    Hobby:<input type="checkbox"/>Singing
    <input type="checkbox"/>Dancing
    <input type="checkbox"/>Basketball
    <input type="checkbox"/>Reading
    <br/>
    Hometown:<select>
    <option>Please select</option>
    <option>HuBei</option>
    <option>BeiJing</option>
    <option>TaiWan</option>
    <option>California</option>
    <option>Everywhere</option>
</select>
    <br/>
    Birthday:
    <input type="datetime-local"/><br/>
    <input type="submit" value="Sign up"/>
    <input type="button" value="Common button"/>
    <input type="reset" value="Reset the button"/>
</form>
</body>
</html>

action : 直接提交的地址

			method : 
					get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
					post 方式  会将参数封装在请求体中, 没有这样的限制
					
		
		input :
			type: 指定输入项的类型
				text : 文本
				password :  密码框
				radio :		单选按钮
				checkbox :  复选框
				file 	 : 上传文件
				submit   : 提交按钮
				button 	 : 普通按钮
				reset	 : 重置按钮
				hidden  : 隐藏域
				
				date    : 日期类型
				tel     : 手机号
				number   : 只允许输入数字
				
			placeholder : 指定默认的提示信息
			name : 在表单提交的时候,当作参数的名称
			id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
		
		textarea : 文本域, 可以输入一段文本
					cols : 指定宽度
					rows : 指定的是高度
		
		select  : 下拉列表
			option : 选择项