HTML5基础教程（9）-表单form

欢迎来到HTML的世界，现在开始HTML之旅吧！

form

form也就是表单可以收集用户的输入给我们，我们需要收集的元素被包含在form里：

<form>
  <input type=“text” name=“username”>
</form>

这是远远不够的，我们需要收集信息，所以必须有一个提交按钮：

<form name=“personal_info” action=“info.html” method=“get”>
  Username:<input type=“text” name=“username”>
  Password:<input type=“password” name=“password”>
  <input type=“submit”>
</form>

接下来我们来看看其他可以在form中出现的东西：

单选框

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框

<form>
<input type="checkbox" name="program" value="python">l am good at python
<input type="checkbox" name="program" value="java">I am good at java
<input type=“checkbox” name=“program” value=“c”>l am good at c
</form>

下拉列表

<form>
<select name="program">
<option value="python">Python</option>
<option value="java">Java</option>
<option value="c">C</option>
<option value="HTML" selected>HTML</option>
</select>
</form>

更美观

<form>
 <fieldset>
  <legend>personal info</legend>
  Username: <input type="text">
  Email: <input type="text">
  Password: <input type=“password”>
 </fieldset>
</form>

预先确定的输入框

<form>
<input list="program" name="program">
<datalist id="program">
  <option value="python">
  <option value="java">
  <option value="c">
  <option value="HTML">
  <option value="javascript">
</datalist>
<input type="submit">
</form>

下次见！