表单标签-form

  • 作用:收集并提交用户数据给指定服务器
  • 属性:
    • action:收集的数据提交地址也就是URL
    • method:收集的数据的提交方式
      • get :适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.
      • post:适合大量数据,安全,隐式提交
  • 注意
    • 表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.
    • 提交的表单项数据为键值对,键为name属性的值,值为用户书写value的数据
    • form标签会收集其标签内部的数据（name值和value值）
    • form表单的数据提交需要依赖于submit提交按钮.
  • form表单标签的使用:在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式，提交给action属性所指明的提交地址.

    表单域标签学习:

  • 作用:给用户提供可以进行数据书写或者选择的标签.
  • 使用:
    • 文本框:input标签
      • type:
        • text 收集少量的文本数据,用户可见
        • password 收集用户密码数据
      • name:数据提交的键,也会被js使用(必须添加)
      • value: 默认值
    • 单选框:input标签
      • type:
        • radio
      • name:name属性值相同的单选框只能选择一项数据（给每个选项name赋同样的值）
      • value:要提交的数据
      • checked:checked 使用此属性的单选默认是选择状态
    • 提交按钮:input标签
      • type：
        • submit
      • value：为按钮的显示名字
    • 多选框:input标签
      • type:
        • checkbox
      • name:一个多选组需要使用相同的name属性值
      • value:要提交的数据
      • checked:checked 使用此属性的多选框默认是选择状态
    • 单选下拉框:select标签
      • name:数据提交的键名,必须声明
      • 子标签option:一个option标签表示一个下拉选项
        • value:要提交的数据(每个option的value值)
    • 文本域:textarea标签:声明一个可以书写大量文字的文本区域
      • name:数据提交的键名,js和css也会使用
      • rows:声明文本域的行数
      • cols:声明文本域的列数
    • 普通按钮:input标签
      • type:
        • button
      • value:为按钮显示的名字
    • 隐藏标签:input标签
      • type:
        • hidden
      • name
      • value
  • 注意:表单数据提交提交的是表单域标签的value值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <html>
    	<head>
    		<title>form标签学习</title>
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		<h3>form标签学习</h3>
    		<hr />
    			<form action="#" method="get">
    				用户名:<input type="text" name="uname" value="王五"/><br />
    				密码: <input type="password" name="upwd"/><br />
    				性别  :  男<input type="radio" name="sex" value="1" checked="checked"/>  女<input type="radio" name="sex" value="0"/><br />
    				爱好: <br />
    					吃饭<input type="checkbox" name="fav" value="1" checked="checked"/><br />
    					睡觉<input type="checkbox" name="fav" value="2"/><br />
    					打豆豆<input type="checkbox" name="fav" value="3"/><br />
    				籍贯:<br />
    					<select name="address">
    						<option value="">--请选择--</option>
    						<option value="1">北京</option>
    						<option value="2">上海</option>
    						<option value="3" selected="selected">商丘</option>
    					</select>
    					<br />
    				文本域:<br />
    					<textarea name="intro" rows="10" cols="30"></textarea><br />
    				普通按钮:<br />
    					<input type="button" id="" value="普通按钮" />
    				隐藏标签:
    					<input type="hidden" name="hidden" id="" value="哈哈" />
    				<input type="submit" value="登录"/>
    			</form>
    	</body>
    </html>