HTML基础（二）表单的设计

表单包含的类型

表单form可以设置好几种让用户输入的形式，然后从中获取数据，包括几种：

类型	作用
text	文本框
number	数字框，有加减号可以编辑
radio	单选框
checkbox	复选框
range	长度条
select	选择列表
datalist	列表
textarea	文本域
submit	提交按钮，将form中的数据提交

它们的属性值有id，name和value，意义是：

属性值	意义或用法
id	用于别的元素引用
name	表单提交后，服务器从name里面获取
value	提交表单后传递的值

还有其他几个元素：

元素	意义
section	一个块，可以设置style，便于定义样式
label	显示对应id表单元素的文本，这样开发有利于机器语言和残障人士的使用

以下是使用方法：

1. text

<form>
<section>
        <label for="name">what is your name</label>
        <br>
        <input type="text" name="name" id="name">
    </section>
</form>

效果：

2. nubmer

<form>
<section >
        <label for="age">How old are you</label>
        <br>
        <input type="number" name="age" id="age">
    </section>
</form>

效果：

3. radio

<form>
	<section>
        <span>are you male or female</span>
        <br>
		<input type="radio" name="sex" id="female" value="female">
		<label for="female">female</label>
		<input type="radio" name="sex" id="male" value="male">
		<label for="male">male</label>
    </section>
</form>

效果：

4. checkbox

<form>
	<section >
        <span>which color do you like?</sapn>
        <br>
		<input type="checkbox" name="color" id="red" value="red">
		<label for="red">red</label>
		<input type="checkbox" name="color" id="blue" value="blue">
		<label for="blue">blue</label>
		<input type="checkbox" name="color" id="yellow" value="yellow">
		<label for="yellow">yellow</label>
    </section>
</form>

效果：

5. range

<form>
	<section >
		<label for="mood">are you happy? 5 is very happy ,0 is very sad</label>
        <br>
		<input type="range" name="mood" id="mood" value="3" min="0" max="5" step="1">
    </section>
</form>

效果：

6. select

<form>
	<section >
		<label for="city">which city would you like best?</label>
        <br>
		<select name="city" id ="city">
			<option value="guangzhou">guangzhou</option>
			<option value="shenzhen">shenzhen</option>
			<option value="changsha">changsha</option>
		</select>
    </section>
</form>

效果：

7. datalist

<form>
	<section >
	    <label for="drink">which drink would you like?</label>
	    <input list="drinks" id="drink" name="drink">
        <br>
		<datalist  id ="drinks">
			<option value="coffee">coffee</option>
			<option value="mike">mike</option>
			<option value="tea">tea</option>
		</datalist  >
    </section>
</form>

效果:

8. textarea

<form>
	<section>
        <label for="intro">brif self introduction?</label>
        <br>
        <textarea id="intro" name="intro" rows="3" cols="50"></textarea>
    </section>
</form>

效果：

9. submit

要有submit按钮或者用一个button设置一个提交事件才能让表单中的内容提交

<form>
	<section>
        <input type="submit" value="Submit">
    </section>
</form>

效果：