HTML表单

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自动获取焦点