HTML 表单
<form>
标签来创建表单:
输入标签 <input>
输入类型是由 type 属性定义
1. 提交按钮(Submit)
<input type="submit">
当用户单击确认按钮时,表单的内容会被传送到服务器。
表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
注意:数据要提交给服务器必须要为元素指定name属性值
实例
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
显示
Username:2. 重置按钮(reset)
<input type="reset">
- 说明
表单中的单选按钮可以设置以下几个属性:value、name、checked
value:提交数据到服务器的值(后台程序PHP使用)
name:为控件命名,以备后台程序 ASP、PHP 使用
checked:当设置 checked=“checked” 时,该选项被默认选中
3. 单选按钮(Radio Buttons)
实例
<form action="">
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</form>
男 女
- 说明
1.同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“sex”,这样同一组的单选按钮才可以起到单选的作用。
2.类似这种选择框还要制定一个value属性,value属性最终会作为用户填写的值传递给服务器。
3.checked可以将单选按钮设置为默认选中
4. 文本域(Text Fields)
<input type="text" name="username">
当用户要在表单中键入字母、数字等内容时,就会用到文本域。
实例
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name:
Last name:
5. 密码字段
<input type="password" name="password">
密码:
6. 复选框(Checkboxes)
<input type="checkbox" name="text" value="1">
7. 下拉列表
<select name="haha">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<br>
<!-- 重置按钮(reset) -->
<input type="reset" name="reset" value="重置">
<input type="submit" name="submit" value="提交">
</select>
1 2 3 4
8. 补充
<button type="button">点我!</button>
<input type="button" value="按钮">
<button type="reset">重置</button>
<input type="email" value="邮箱">
<input type="tel" value="电话">
属性
autocomplete="on/off"开启或者关闭自动补全
redonly把表单项设置为只读
disabled将表单项设置为禁用
autofocus自动获取焦点