HTML基础学习(五)
所谓的表单其实就是用来传输数据的
1、发送表单数据:
使用form标签的属性action和method,其中action的值为要发送的目的地,也就是发送目的地的URL;而method指定的是发送的方式,包括GET和POST方法。GET方法中浏览器会将数据直接附在表单的action URL之后,这两者之间用问号进行分隔。
POST方法首浏览器将与action属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器会按分段传输的方式将数据发送给服务器。
使用GET请求用户将在他们的URL栏中看到数据,但是使用POST请求洪湖将不会看到。因此一般GET用于查询数据,POST用于传输密码等。
2、表单验证(原生保单组件):
表单验证也就是确保输入数据的格式正确,主要是加在input标签中,作为input的属性,其中input即为文本输入框,文本输入框是最基本的表单组件,它便于用户输入各种数据,HTML文本框只是个纯文本输入控件,也就是不能进行富文本编辑(如加粗、斜体等),富文本编辑器其实都是自定义的组件。
- required属性规定输入值不能为空
- min和max属性强制条目的长度
- 单行文本框,也就是输入的内容不能有换行符,即使输入的内容有换行符,其在发送数据的时候也会将换行删除,一般用法为:
<input type="text" id="text" id="text" value="I'm a text">
<input type="email" id="email" name="email" multiple>
//通过设置multiple属性使得可以让用户输入多个e-mail地址
<intput type="password" id="pwd" name="pwd">
<input type="search" id="search" name="search">
<input type="tel" id="tel" name="tel>
<input type="url" id="url" name="url">
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>
使用< select>< /select>(有属性size,可以指定下拉菜单的可见选项数)和< option>< /option>标签或者< datalist>然后使用list属性将数据列表绑定到一个文本域(input)。
在这两者中,如果对于某个选项是默认的,那么在< option>标签中添加属性selected="selected"。
关于< select>和< datalist>之间的区别:
< datalist>提供的选项只是建议型的,在选择的时候可以不选择选项中的,可以自己添加,但是< select>就不可以。
复选框:
<input type="checkbox" checked>
单选框:
<input type="radio" checked>
提交文件:
<input type="file">
提交按钮:
<button type="submit">this is a submit button</button>//方法一
<input type="submit" value="this is a submit button">//方法二
重置按钮:就是将所有的内容设置为默认值而不是清空:
<button type="reset">name</button>
<input type="reset" value="name">
匿名按钮:没有自动生效的按钮,但是可以使用JavaScript代码进行定制:
<button type="button">name</button>
<input type="button" value="name">
3、构建HTML表单:
- fieldset和legend元素,< fieldset>< /fieldset>元素组合表单中的相关数据,< legend>< /legend>元素为其定义标题。
- label元素:一般与input一起使用,并且要求input的id的值与label的for值相同,从而起到绑定的作用,其作用是当用户选择该标签的时候,浏览器会自动将焦点转到和标签相关的表单控件上。也就是说点击这个标签和点击表单空间都会出现光标。
输入文本框的属性:
id:唯一标识,不允许重复。
name:可以重名,并且在将数据传输到数据库的时候是不可省略的。
value:控件的值。
综合应用的实例:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>表单综合案例:</legend>
<label for="name">用户名:</label>
<input type="text" id="name" name="name" max="4">
<br>
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="eamil">
<br>
<br>
<laebl for="tel">电话号码:</laebl>
<input type="tel" id="tel" name="tel">
<br>
<br>
<label for="pwd">密码:</lebel>
<input type="password" id="pwd" name="pwd">
<br>
<br>
<input type="radio" id="man" name="man">
<label for="man">男</label>
<input type="radio" id="woman" name="woman">
<label for="woman">女</label>
<br>
省(市):
<select>
<option>北京</option>
<option>上海</option>
<option>广东</option>
<option selected="selected">深圳</option>
</select>
市(区):
<select>
<optgroup label="北京市">//这里的oprgroup是在下拉列表里面进行分组的
<option>东城区</option>
<option>西城区</option>
<option>海淀区</option>
</optgroup>
<optgroup label="上海市">
<option>浦东区</option>
<option>长宁区</option>
<option>徐汇区</option>
</optgroup>
</select>
<br>
<input type="checkbox" id="eat" name="eat" checked="checked">
<label for="eat">吃饭</label>
<input type="checkbox" id="sleep" name="sleep" checked="checked">
<label for="sleep">睡觉</label>
<input type="checkbox" id="paly" name="paly" checked="checked">
<label for="paly">玩耍</label>
<br>
<textarea cols="100" rows="10"></textarea>
<br><br>
<label for="color">你最喜欢什么颜色?</label>
<input type="text" id="color" name="color" list="suggest">
<datalist id="suggest">
<option>black</option>
<option>white</option>
<option>blue</option>
</datalist>
<br>
<br>
<input type="file">
<br>
<br>
<input type="submit" value="提交">
<button type="reset">重置</button>
</fieldset>
</form>
</body>
</html>
效果图: