表单form及其元素
(以下所有内容仅用以记录学习过程中的个人理解,如有错误欢迎指出)
1. 表单form
<form>标签用于创建供用户输入的 HTML 表单。简单实例就像这样:
<form method="post"(规定用于发送表单数据的HTTP方法)
action="xxxx.html"(规定当提交表单时向何处发送表单数据)>
<p>用户名 <input name="name" type="text"></p>
<p>密码 <input name="pass" type="password"></p>
<p><input type="submit" name="Button" value="提交"/></p>
</form>
2. 表单元素格式
2.1 < input >标签
一般需要以下属性,根据元素类型会有改变:
<input type="(元素类型)" name="(元素名称)" value="(元素默认值)"/>
2.2 文本框、密码框
密码框也是文本框,只不过输入内容不可见。
<form>
<p>用户名 <input type="text" name="(文本框名称)" value="我是默认用户名"/></p>
<p>密码 <input type="password" name="(密码框的名称)" size="(密码框长度)" value="我是默认密码"/></p>
</form>
2.3 单选框、复选框
一组单选框如果不指定相同的name属性,则无法保持单选。
<form>
<p>
<input type="radio" name="gender" value="male" checked="checked"(默认选中)/>男
<input type="radio" name="gender" value="female"/>女
</p>
<p>
<input type="checkbox" name="sports" value="zq"/>足球
<input type="checkbox" name="sports" value="lq" checked="checked"(默认选中)/>篮球
<input type="checkbox" name="sports" value="wq" checked="checked"(默认选中)/>网球
</p>
</form>
2.4 下拉列表
下拉列表的name属性指定给<select>,value属性指定给<option>。
<optgroup>用来给选项分组,其中用label属性指定每个分组的名字。
<form>
<select name="(列表名称)" size="(一次显示行数)" multiple="(是否多选)">
<optgroup label="单数">
<option value="(选项值)">选项1</option>
<option value="(选项值)">选项3</option>
</optgroup>
<optgroup label="偶数">
<option value="(选项值)" selected="selected"(默认选中)>选项2</option>
<option value="(选项值)">选项4</option>
</optgroup>
</select>
</form>
2.5 按钮
<button>也可以创建按钮,比表单的按钮使用更加灵活。
<form>
<input type="button"(普通按钮) name="Button" value="按钮"/>
<input type="reset" (重置按钮) name="Reset" value="重置"(按钮上的文字)>
<input type="submit"(提交按钮) name="Submit" value="提交">
</form>
2.6 标记< label >
当用label标签将文本与表单控件绑定之后,可以通过点击label内文本,触发绑定控件。
绑定方式:< label >的for属性与绑定控件的id属性保持一致。
<form>
<label for="user">用户名 </label><input id="user" name="name" type="text">
<label for="pwd">密码 </label><input id="pwd" name="pass" type="password">
</form>
2.7 < fieldset >、< legend >
< fieldset >可用来给表单项分组,< legend >则用来给分组命名。
<form>
<fieldset>
<legend>健康信息</legend>
身高 <input type="text"/>
体重 <input type="text"/>
</fieldset>
<fieldset>
<legend>用户登录</legend>
账号 <input type="text"/>
密码 <input type="text"/>
</fieldset>
</form>