HTML 表单和输入标签 （4）

<form>标签

<form>标签：表单标签，用来定义供用户输入的表单。

比较常用的属性：

action：规定向何处提交表单的地址(URL)(提交页面)。

method：规定在提交表单时多用的HTTP方法(默认：GET)，get不够安全，为确保安全一般使用post。

target：规定action属性中地址的目标(默认：_self)

注：

1. _blank：在新窗口中打开被链接的文档。
2. _seft：默认。在相同的框架中打开被链接文档。
3. _parent：在父框架集中打开被链接文档。
4. _top：在整个窗口中打开被链接文档。
5. framename：在指定的框架中打开被链接文档。

<input>标签

<input>标签：根据type的值不同，效果不同。

1. type=“text”：普通文本域
2. type=“password”：密码
3. type=“checkbox”：复选框
4. type=“radio”：单选框
5. type=“button”：按钮
6. type=“submit”：提交按钮
7. type=“reset”：重置按钮

<input>标签都放在<form>表单中，通过action和method方法与后端联系。

文本域+密码域

type=“text”：普通文本域。
type=“password”：密码。

<!--text:文本域 password：密码域-->
Username: <input type="text" name="firstname"><br>
Password: <input type="password" name="password"><br>

复选框

type=“checkbox”：复选框。

<!--checkbox:复选框，name一样，value不一样，checked="checked"预选项-->
<input type="checkbox" name="vegetable" value="tomato" >I have a tomato<br>
<input type="checkbox" name="vegetable" value="cabbage" checked="checked">I have a cabbage<br>

单选框

type=“radio”：单选框。

<!--radio:单选按钮 name一样，value不一样-->
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female" checked="checked">Female<br>

下拉列表

<select></select>

<!--下拉列表：有selected的敌法表示为预选项-->
<!--fieldset：边框；legend：标题-->
<fieldset>
<select>
	<legend>下拉列表：</legend>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="tomato" selected>Tomato</option>
<option value="pair">Pair</option>
</select>
</fieldset>

多行文本域

<textarea></textarea>

<!--多行文本域:可以变换大小-->
<textarea rows="10" cols="30">
我是一个文本框。
</textarea> 

各种按钮

type=“button”：按钮。
type=“submit”：提交按钮。
type=“reset”：重置按钮。

<!--button:按钮-->
<input type="button" value="Hello world!">
<!--submit:提交按钮-->
<input type="submit" value="提交">
<!--reset:撤销-->
<input type="reset" value="重置">