表单form以及表单元素

表单：指在网页中用来收集用户信息

表单元素(可分为两种不一样类型):

​ (1)、是以input标签显示的表单元素html

​ (2)、特殊的一种表单：是以语义化的标签的表单元素web

特殊的表单元素:

​

<button>按钮</button>

​

<textarea>文本域</textarea>

1.form表单在一个网页有且只能有一个

<form>
	<label>用来显示信息或说明性的文字</label>
	<input type="设置表单元素的类型" name="..." id="..." value="按钮中想写的内容" placeholder="表示占位符/文本框的阴影提示"/>
</form>

表单的数据提交的方式method/http请求数据的方式有两种：（写在<form>中）安全

​ （1）get提交：会将用户的信息显示在url地址栏中，不安全，最大长度不能超过255个字符svg

​ （2）post提交：不会将用户的数据显示在url地址栏中，安全，提交数据量大post

<form>中action属性:指数据提交到的路径地址url

<input />中type属性的值:code

​ text(文本类型)orm

​ password(密码类型)xml

​ checkbox(复选框)htm

​ radio(单选框)

​ submit(表单数据的提交)

​ reset(重置数据)
表单轮廓outline: 0/none;(取消轮廓)
outline:5px soild red;

实例:

<form>
	<label>帐户:</label>
	<input type="text" name="userName"  placeholder="手机/邮箱/帐户..."/>
	<br />
	<label>密码:</label>
	<input type="password" name="pwd" placeholder="请输入密码"/>
	<br />
	<input type="checkbox" id="jizhu"/><label for="jizhu">记住密码</label>
	<br />
	<input type="radio" name="rad"  id="man"/><label for="man">男</label>
	<input type="radio" name="rad" id="woman"/><label for="woman">女</label>
	<br />
	<input type="button" value="确认登陆"/>
	<input type="submit" />
	<input type="reset" value="重置" />
</form>

二、下拉框实例

<form action="http://www.baidu.com/index.html" method="post">
	<!--下拉选择框-->
	<fieldset>
		<legend>必选选项</legend>
		省:<select>
				<option>--请选择省份--</option>
				<option>陕西省</option>
				<option>四川省</option>
				<option>甘肃省</option>
				<option>山西省</option>
		</select>
		<br /><br />
		市:<select>
				<option>--请选择城市--</option>
				<optgroup label="陕西省">
					<option>西安市</option>
					<option>宝鸡市</option>
					<option>延安市</option>
					<option>渭南市</option>
				</optgroup>
				<optgroup label="四川省">
					<option>成都市</option>
					<option>广元市</option>
				</optgroup>
		</select>
		<br /><br />
		区县:<select>
				<option>--请选择区县--</option>
				<optgroup label="西安市"> 
					<option>高新区</option>
					<option>莲湖区</option>
					<option>曲江新区</option>
				</optgroup>
		</select>
	</fieldset>
	<br />
	<input type="submit" value="提交数据"/>
</form>