HTML新手学习小记6（表单一）

表单标签（一）
表单是装载用户填写内容的一个容器，当用户输入内容后点击任意按键提交，表单会将数据发送到服务器进行处理。

比较常见的表单有：
登录注册时输入账号、密码、生日、昵称、手机号和性别等信息。
聊天软件中的输入框，输入文字、表情、图片、连接和语音等等。
外卖快递软件中的创建收货地址，输入地址、选择发货日期、姓名、联系方式。

HTML5中，表单由form标签装载，所有表单在此标签中才能运用。
格式为：<form> </form>
表单标签有两个常用属性：action和method
action指定URL中数据处理数据的脚本，一般是action=“同目录下的处理页面：XXX.html”，如果为空值，则为本页处理。
method则指定数据提交的形式：一种是post，一种是get。
post：
数据将打包为数据块发送到脚本进行处理，不使用请求字符串。
get：
浏览器会创建请求字符串，该字符串包含一个问号和表单内的数据，浏览器会将该请求字符串返回给URL指定的脚本进行处理，但是表单的值就会显示在浏览器地址栏中。

URL（Uniform Resource Locator WWW中的统一资源定位系统）

所以为了信息安全，建议多用post的提交形式。

表单元素 input标签
采用input标签可以添加文本输入框、按键。

input包含的属性：
type：
默认为text（单行文本框）,其他还有password（密码输入框，输入内容自动加密为*）、checkbox（复项选择）、radio（单项选择）、submit（提交按键）、reset（重填按键）、file（上传文件）、image（图片提交按键）和button（文字按键，需要另外增加激发事件oneclick）
name：
这是为单元指定的名称，区分元素、类似每个人的姓名。
value：
选用属性，是单元的初始值，类似每个人的个性。如果type为radio，必须选用value。
size：
选用属性，指定单元的默认宽度，假设单元为text或password，则宽度会以字节来计算，其他的则用像素计算。size=“100”
maxlength和minlength：
选用属性，最大输入不超过X和最小输入不少于X，可在text或password中设定，默认为无限大和0。maxlength=“100”
checked
在radio和checkbox中选用此属性，用于设定默认选中的值。checked=“checked”

input代码格式例子，看完应该可以了解表单单元用法：
1

<form method="post" action="">
<p>性&nbsp;&nbsp;&nbsp;别：
<input name="male" type="radio" value="男性" checked=“checked”>男&nbsp;
<input name="female" type="radio" value="女性">女
</p>
<p>爱&nbsp;&nbsp;&nbsp;好：
<input name="interest" type="checkbox" value="sing">唱歌&nbsp;&nbsp;<input name="interest" type="checkbox" value="sport">运动&nbsp;&nbsp;<input name="interest" type="checkbox" value="painting">绘画&nbsp;&nbsp;<input name="interest" type="checkbox" value="home">宅
</p>
</form>

效果：

解读：为单项选择利用input做了两个项，分别name为male和female，给予value男性和女性，在选项后方输入文字男和女，前端即可看见男和女两个单选项，用checked来设定male为已经默认选好的。复选框chekbox，利用input做多个选项，唱歌、运动、绘画和宅。

2

<form method="post" action="">
    <p>账&nbsp;&nbsp;&nbsp;号：
	<input name="account" type="text" size="40" value="在这里输入..." maxlength="18">
	</p>
	<p>密&nbsp;&nbsp;&nbsp;码：
	<input name="pass" type="password" size="40" minlength="6">
	</p>
</form>

效果：

解读：账号，单行输入框，最大输入18字节宽度40字节，框内默认有值value“在这里输入…”，输入框名称为account。密码，使用password类型，字节宽度40，最少输入6位数。

3

<form method="post" action="">
<p><input name="submit" type="submit" value="提交">   
	<input name="reset" type="reset" value="重填">   
	<input name="Botton" type="button" value="警示" onclick="alert(this.value)">  
	<input name="Botton" type="button" value="无意义">  
	<input type="image" src="image/login.gif" alt="登录" name="登录"/>
	</p>
</form>

效果：

解读：文字按键用value来定前端按键显示名称；
第一个是提交文字按键，点击后表单被提交处理。
第二个是重填，表单输入内容被清除，回到默认状态。
第三个是自己加的空按键，加了一个弹窗值，点击弹出弹窗，弹窗上出现value设定的值“警示”。
第四个也是空按键，没有意义只是可以点击。
第五个是图片提交按键，需要在同目录image下放按键图片，直接调用，必须要有alt属性，用title、width和height来扩展描述，点击提交表单数据。