文章目录
概念
表单元素
表单属性
总结
概念
HTML 表单用于搜集不同类型的用户输入。
表单元素
1.<input>元素是最重要的表单元素,通过type属性,达到不同功能的用户输入。
2.text:定义常规文本输入;radio:定义单选按钮输入;submit:定义提交按钮;
文本输入
<input type="text"> 定义用于文本输入的单行输入字段:
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
单选按钮输入
<input type="radio"> 定义单选按钮。
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
提交按钮
<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
<select> 元素(下拉列表)
<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
<textarea> 元素
<textarea> 元素定义多行输入字段(文本域):
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
<option> 元素
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
<option value="fiat" selected>Fiat</option>
<button> 元素
<button> 元素定义可点击的按钮:
<button type="button" οnclick="alert('Hello World!')">Click Me!</button>
输入类型:text
<input type="text"> 定义供文本输入的单行输入字段:
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
输入类型:password
<input type="password"> 定义密码字段:
<form> User name:<br> <input type="text" name="username"> <br> User password:<br> <input type="password" name="psw"> </form>
输入类型:submit
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序(form-handler):
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
输入类型:radio
<input type="radio"> 定义单选按钮:
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
输入类型:checkbox
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
输入类型:url
<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持,在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入。
<form> Add your homepage: <input type="url" name="homepage"> </form>
value 属性
value 属性规定输入字段的初始值:
<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>
size 属性
size 属性规定输入字段的尺寸(以字符计):
<form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>
form 属性
form 属性规定 <input> 元素所属的一个或多个表单。
提示:如需引用一个以上的表单,请使用空格分隔的表单 id 列表。
<form action="action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">
height 和 width 属性
height 和 width 属性规定 <input> 元素的高度和宽度。
height 和 width 属性仅用于 <input type="image">。
注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
总结
1.text单选框需要把value值加上,同一组单选框内的name必须一致。
2.checkbox复选框需要把value值加上,注意checked 设置是否选中,同一组单选框内的name必须一致。
3.select - option下拉列表需要把value值加上。
4.submit提交按钮注意需要value来填写按钮的名字,按钮名字写在标签中间
5.reset重置按钮注意需要value来填写按钮的名字,按钮名字写在标签中间。