HTML表单详解（一）

form

<form method="post"(规定如何发送表单，常用值get/post) action="result.html">(表示向何处发送表单数据)</form>

文本框

    <label for="username">用户名</label>
    <input type="text" id="username">

注：label元素不会向用户呈现任何特殊效果。但若label标签for属性与相关元素的id值相同的话，点击label对应的文本浏览器就会自动将焦点对应到相应的表单元素上

表单控件与label元素的隐式关联与显式关联

1. 隐式关联

<label>用户名<input type="text" name="user"></label>

2. 显式关联

<label for="username">用户名</label>
    <input type="text" id="username">

<form action="">
<!--    文本框-->
    <label for="username">用户名</label>
    <input type="text" id="username" placeholder="请输入用户名">
</form>

显示效果：

<form action="">
<!--    文本框-->
    <label for="username">用户名</label>
    <input type="text" id="username" value="请输入用户名">
</form>

显示效果

结论：placeholder与value后面的值都可以显示在文本框内，但区别是当焦点转移到文本框后用placeholder时，对应的值消失取而代之的是用户输入的值，placeholder只是给用户的提示。而当焦点转移到文本框后用value则对应的值不会消失，用户可以在该基础上添加或者删除

<label for="username">用户名</label>
    <input type="text" id="username" value="请输入用户名" autofocus>

注：autofocus，浏览器打开或者刷新时，焦点自动固定到对应的表单元素上

 <label for="username">用户名</label>
    <input type="text" id="username" value="请输入用户名" disabled>

注：disabled，浏览器首次加载的时候禁用此元素，用户无法选定或者修改

 <label for="username">用户名</label>
    <input type="text" id="username"  maxlength="10">

注：maxlength定义文本框内字符串的最大值

单选框

 	<input type="radio" id="man" >
    <label for="man">男</label>
    <input type="radio" id="woman" >
    <label for="woman">女</label>

这个时候两个都可以被选择，就像这样

但是很显然不太符合我们的预期效果，因为性别不可能又是男又是女，因此可以这样修改

    <input type="radio" id="man" name="sex">
    <label for="man">男</label>
    <input type="radio" id="woman" name="sex">
    <label for="woman">女</label>

这样就保证只能选择一个性别了，但是又有一个问题：打开或者刷新的时候没有默认选择的值。要想解决这个问题，我们只需要加入checked就可以解决了

    <input type="radio" id="man" name="sex" checked>
    <label for="man">男</label>
    <input type="radio" id="woman" name="sex">
    <label for="woman">女</label>

这样默认的就是男性了

复选框‘

  <input type="checkbox" id="game" >
    <label for="game">游戏</label>
    <input type="checkbox" id="music">
    <label for="music">音乐</label>

效果

上面我们可以看到在单选框内我们写了两个name，并且保证了两个name的值一样，说明Input里面的name在单选框里相同的name可以使得只能选择其中一个，而在单选框之外name的值方便提交

下拉列表

<label for="dizhi">地址</label>
<select name="dizhi" id="dizhi">
    <option value="bg">北京</option>
    <option value="sh">上海</option>
    <option value="cd">成都</option>
    <option value="yn">云南</option>
</select>

效果：

<label for="dizhi">地址</label>
<select name="dizhi" id="dizhi">
    <option value="bg">北京</option>
    <option value="sh" selected>上海</option>
    <option value="cd">成都</option>
    <option value="yn">云南</option>
</select>

效果

注：未加selected时下拉列表第一个默认显示排在第一个的哪一个，如果加了selected，则显示所对应的那个

文本域

<label for="tx">填写</label>
<textarea name="tx" id="tx" cols="30" rows="10"></textarea>

效果

注：在HTML5中一般不用cols与rows来规定文本域的大小，而是用css来实现

提交

1. 第一种提交方法

<input type="submit" id="sub" value="交">

2. 第二种提交方法

<button>提交</button>

注意：button这个标签在表单里面有默认提交功能，但在外面就仅仅只是一个按钮