表单form

• 作用：收集数据、发送数据

案例：百度一下

• 分析

  
  
  百度一下

• 代码

<form>
    <input type="text" size="100"/>
    <input type="submit" value="百度一下"/>
</form>

• 说明

|代码|作用|
|:-|
|form|表单|
|input|输入框|
|type="text"|类型文本框|
|size|文本框长度|
|type="submit"|提交按钮|
|value|按钮文字|

案例：会员注册

• 分析

  
  
  会员注册
• 代码
  略
• 说明

|代码|作用|
|:-|
|type="text"|文本框|
|type="password"|密码框|
|type="button"|按钮|
|type="submit"|提交按钮|
|type="reset"|重置按钮|
|type="radio"|单选按钮|
|type="checkbox"|复选按钮|
|select option|下拉框|
|textarea|文本域|

默认

• 单选框默认勾选
• 复选框默认勾选
• 下拉框默认选中
• 文本框默认值

单选按钮单选效果

其他

• 文本框提示文字
• 文本域行列属性
• 下拉框多选
• 表单禁用/表单控件禁用
• 表单控件只读

input类型扩展

• type="file" 文件上传按钮
• type="hidden" 隐藏域
• type="image" 图片按钮 可以使用width/height

按钮的两种写法

普通按钮

<input type="button" value="按钮"/>

<button type="button">按钮</button>

提交按钮

<input type="submit" value="提交按钮"/>

<button type="submit">提交按钮</button>

重置按钮

<input type="reset" value="重置按钮"/>

<button type="reset">重置按钮</button>