Demo 01:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form表单</title>
<style>
</style>
</head>
<body>
<!--表单:用于将本地的数据提交到远程的服务器
使用form标签创建一个表单
action属性:表单要提交的服务器地址
-->
<form action="target.html" target="_blank">
<!--注意:
数据要提交到服务器中,必须要为元素提供一个name属性
-->
<!--文本框 -->
用户名: <input type="text" name="username"> <br><br>
<!--密码框 -->
密码: <input type="password" name="password"><br><br>
<!--
单选按钮:
像这种选择框,必须指定一个value属性,value表示要提交给服务器的数据
name属性值进行分组
checked="checked" 键值对设置默认选中项
-->
性别: <input type="radio" name="gender" value="male" checked="checked">
<input type="radio" name="gender" value="female"><br><br>
<!--复选框
value:提交到服务器端的值
-->
爱好:
篮球 <input type="checkbox" name="hobby" value="1" checked="checked">
足球<input type="checkbox" name="hobby" value="2">
排球 <input type="checkbox" name="hobby" value="3">
乒乓球<input type="checkbox" name="hobby" value="4">
橄榄球 <input type="checkbox" name="hobby" value="5">
<br><br>
<!--select:下拉列表
option子元素:
selected="selected" 设置默认选中项
-->
所在城市:
<select name="currentCity" id="currentCity">
<option value="0">南京</option>
<option value="1" selected="selected">苏州</option>
<option value="2">无锡</option>
<option value="3">徐州</option>
<option value="4">扬州</option>
<option value="5">南通</option>
</select>
<br><br>
自我介绍:
<textarea name="selfIntroduction" id="selfIntroduction" cols="30" rows="10"></textarea>
<br><br>
<!--重置按钮:将表单数据回滚到最初状态 -->
<input type="reset" value="重置">
<!--表单提交按钮:触发表单提交 -->
<input type="submit" value="提交">
</form>
</body>
</html>
Demo 02:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--target属性 -->
<form action="target.html">
<!-- value属性可以为text或者password框设置默认值 \
autocomplete:设置自动补全功能
on:开启
off:关闭
readonly属性:设置元素为只读,数据可以被提交到服务器
readonly="readonly"(也可以直接添加readonly属性)
disabled属性:禁用元素,数据不会被提交到服务器
autofocus属性:设置元素的聚焦
-->
<!-- 用户名: <input type="text" name="username" autocomplete="off"><br><br> -->
用户名: <input type="text" name="username" autocomplete="off"><br><br>
资历:<input type="text" name="zili" autofocus="autofocus"><br><br>
<input type="text" name="word" value="youarebest" disabled="disabled"><br><br>
密码: <input type="password" name="password" value="656565"><br><br>
<!--普通按钮 -->
<input type="button" value="按钮">
<!--重置和提交按钮 -->
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
</body>
</html>