一、表单基本结构
1.<form> 表单
<form action>:用于指定表单的提交地址。(需要与后端人员沟通确定)
eg:<form action="https://www.baidu.com/s">、
<form action="https://search.jd.com/search">
<form action target="_self">在本页面下打开,_blank:在新建窗口下打开。
<form action target method>以后了解
2.<input>输入框
<input type="text">:以文本的方式输入。
<input type name="wd/keword/...">:需要与后端人员协定。
3.<buttom>按钮。 buttom的默认type属性是submit(提交)。
仅仅想要一个普通按钮就只需改变type的值为:buttom。
二、表单常用控件
<input type="text">
账户:<input type="text" name="account" value="zhangsan" maxlength="10">
3.单选框
<input type="radio" name="sex" value="male" checked(表示按钮默认选项)>女
<input type="radio" name="sex" value="female">男
注意:单选框要有单选效果,多个radio的name属性要保持一致。
4.复选框:
<input type="checkbox" name="hobby" value="smoke" checked>抽烟
<input type="checkbox" name="hobby" value="drink" checked>喝酒
<input type="checkbox" name="hobby" value="perm">烫头
5.隐藏域
<input type="hidden" name="tag" value="100">
服务器看不见的一个区域。
6.提交与重置
<button type="submit">确认</button>
<button type="reset">重置</button>
6.文本域
不能写文本属性。
<textarea name="other" cols="22" rows="5"></textarea>
name就是能够在网页上显示出来的名称,cols是控制列,row是控制行的。就相当于宽和高。
7.下拉框
<select name="place" >
<option value="渝">重庆</option>
<option value="沪">上海</option>
<option value="杭">杭州</option>
<option value="京" selected>北京</option>
</select>
name:指定数据的名称。
option中如果没有value,那默认值就是option后面的数。
默认选项用selected。
8.禁用表单控件
使用范围:input、textarea、buttom、select、option。
账户:<input disabled type="text" name="account" value="zhangsan" maxlength="10">
表示该选项框已经有内容且不允许修改
9.label标签。
label标签可与表单控件关联,关联之后其点击文字,同样有获取焦点的效果。
两种方式:
1.让label标签的for'属性的值等于表单控件的id。
2.将表单控件嵌套在label里面。
10.filedset和legende
filedset:为表单控件进行分组。
legende:为标签分组的题目。
框架标签
iframe
可在网页中嵌入其他网站或文件。
也可以插入其他网站链接进行跳转。