4、HTML基础之表单

一、表单

a、创建表达

• form: 表单

<form name="" method="" action=""></form>

• name： 表单名字， method: 从浏览器到服务器的方式， get或者post, action: URL

b、插入表单对象

• 表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等
• 文本字段

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

例如

<form name="formBox" method="post" action="">
  姓名：<input type="text" name="name" size="20" /><br />
  年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>

• 单选按钮 radio

<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

• 复选框 checkbox

<form name="formBox" method="post" action="">
  <input type="checkbox" name="name0" checked />炸鸡<br />
  <input type="checkbox" name="name1" />烤串<br />
  <input type="checkbox" name="name2" />火锅<br />
</form>

• 按钮—提交按钮 submit

<form name="formBox" method="post" action="">
  <input type="text" value="输入的内容" />
  <button type="submit">This a submit button</button>
  
  <!--or-->
  
  <input type="submit" value="This is a submit button" />
</form>

• 按钮—重置按钮 reset

<form name="formBox" method="post" action="">
  <input type="text" />
  <button type="reset">This a reset button</button>

  <!--or-->

  <input type="reset" value="This is a reset button" />
</form>

• 按钮—匿名按钮 button

<button type="button">This a anonymous button</button>

<!--or-->
<button>This a anonymous button</button>

<!--or-->
<input type="button" value="This is a anonymous button" />

c、菜单和列表

• 下拉菜单

<form name="formBox" method="post" action="">
  <select name="select">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

• 列表项

<form name="formBox" method="post" action="">
  <select name="select" size="3" multiple="multiple">
    <option value="成都">成都</option>
    <option value="广州">广州</option>
    <option value="四川">四川</option>
    <option value="上海">上海</option>
  </select>
</form>

d、文本域

• textarea： clos 代表列数，rows 代表行数。

<form name="formBox" method="post" action="">
  留下您的联系方式：
  <textarea name="textarea" cols="35" rows="5"></textarea>
</form>

https://developer.mozilla.org/zh-CN/