11.オートコンプリートとは？

上記のプログラムは下記のプログラムで構成されています。

HTML部分

<form action='' method='post'>
	<p>データを入力してください</p>
	<p><input type='text' name='text_data'  value='' size=40 ></p>
  <button type='submit' name='action'	value='input_text01'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p>

■3行目：<input>タグの指定でtypeは 'text' で、valueは 空白 です。

ここにautocomplete=を指定しなくてもオートコンプリートはデフォルトで機能します。

■form全体の説明はPHPのフォーム操作を参照して下さい。

PHP部分

<?php
    $input_submit_msg = "";
	if(isset($_POST['action']) && $_POST['action'] == 'input_text01'){
		$text	= isset($_POST['text_data']) ? $_POST['text_data']:'';
		 if(!preg_match('/[^\s　]/',$text)){
            $input_submit_msg = '入力データは空です。再入力してください。';
        }else{
            $input_submit_msg = '入力データは【'.$text.'】です。';
        }
	}
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。

<style>
	.text{box-shadow: 0 0 0 20px white inset;}
</style>

下記は上記のCSSを設定した例です。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post' >
	<p>データを入力してください</p>
	<p><input type='text' name='text_data'   size=40  value=''  autocomplete='off'></p>
  <button type='submit' name='action'	value='input_text02'>送信</button>
</form>
<p class='msg01' style='color:red;'><?php esc_html_e($input_submit_msg); ?></p>

■3行目：<input>タグ

ここに autocomplete='off' を指定する事によりコンプリート機能をOFFにします。

PHP部分

<?php
    $input_submit_msg = "";
	if(isset($_POST['action']) && $_POST['action'] == 'input_text02'){
        $text = isset($_POST['text_data']) ? $_POST['text_data']:'';
        if(!preg_match('/[^\s　]/',$text)){ 
           $input_submit_msg = '入力データは空です。再入力してください。'; 
        }else{ 
           $input_submit_msg = '入力データは【'.$text.'】です。'; 
        }
   }
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post'>
	<p> アカウント: <input type='text'     name='user01' value=''	size='20' autocomplete='username'     required></p>
	<p> パスワード: <input type='password' name='pass01' value=''	size='20' autocomplete='new-password' required></p>
	<button type='submit' name='action'	value='input_pass01'>新規登録</button>
</form>

■2行目：<input type='text'>

アカウントを autocomplete='username'で指定しています。

■3行目：<input type='password'>

パスワードを autocomplete='new-password' を指定しています。

PHP部分

<?php
	$input_submit_msg = "";
	if(isset($_POST['action']) && $_POST['action'] == 'input_pass01'){
		$account01	= isset($_POST['user01']) ? $_POST['user01']:'';
		$pass01			= isset($_POST['pass01']) ? $_POST['pass01']:'';
		if(!preg_match('/[^\s　]/u',$account01)){
			$input_submit_msg = 'アカウントが空白になっています。正しく入力してください。';
		}elseif(!preg_match('/[^\s　]/u',$pass01)){
			$input_submit_msg = 'パスワードが空白です。アカウントから正しく入力してください。';
		}else{
			$input_submit_msg = '【'.$account01.'】と【'.$pass01.'】が入力または選択されました。';
		}
	}
?>

■上記は、送信ボタンが挿入された時だけ処理されます。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post'>
	<p> アカウント: <input type='text'     name='user01' value=''	size='20' autocomplete='username'     required></p>
	<p> パスワード: <input type='password' name='pass01' value=''	size='20' autocomplete='current-password' required></p>
	<button type='submit' name='action'	value='input_pass02'>LOGIN</button>
</form>
<p class='msg01' style='color:red;'><?php echo esc_html($input_submit_msg); ?></p><!-- submit後の表示エリア -->
<script>

■2行目：<input type='text'>

アカウントを autocomplete='username'で指定しています。

■3行目：<input type='password'>

パスワードを autocomplete='current-password' を指定しています。

PHP部分

<?php
	$input_submit_msg = "";
	if(isset($_POST['action']) && $_POST['action'] == 'input_pass02'){
		$account01	= isset($_POST['user01']) ? $_POST['user01']:'';
		$pass01			= isset($_POST['pass01']) ? $_POST['pass01']:'';
		if(!preg_match('/[^\s　]/u',$account01)){
			$input_submit_msg = 'アカウントが空白になっています。正しく入力してください。';
		}elseif(!preg_match('/[^\s　]/u',$pass01)){
			$input_submit_msg = 'パスワードが空白です。アカウントから正しく入力してください。';
		}else{
			$input_submit_msg = '【'.$account01.'】と【'.$pass01.'】でログインされました。';
		}
	}
?>

■上記は、送信ボタンが挿入された時だけ処理されます。

上記のプログラムは下記のプログラムで構成されます。

HTML部分

<form action='' method='post'  class='form01' >
	<p> アカウント: <input type='text'			name='username'	 	size='20'	value='' autocomplete='off' required></p>
	<p> パスワード: <input type='password'	name='password' 	size='20'	value='' autocomplete='current-password' required ></p>
	<button type='button' class='login' >LOGIN</button>
	<p class='err_msg' style='color:red;'><?php echo esc_html($input_submit_msg); ?></p> 
</form>

■2行目：<input type='text'>

アカウント単独で保存したくないので autocomplete='off'を指定しています。

■3行目：<input type='password'>

カレントIDを表示したいので autocomplete='current-password' は指定しています。

script部分

<script>	
	$(function(){
		/******** マウスダウンの処理  *****************/
		$('[name="password"]').mousedown(function(){
			var input_uid = $('[name="username"]').val();
			if(input_uid == ''){
				$('.err_msg').html('アカウントが未入力です。<br>アカウントから入力してください。');
			}else{$('.err_msg').html('')}
		});
		$('[name="username"]').mousedown(function(){
			$('.err_msg').html('');
		});	
		/******** 入力文字のチェック  *****************/	
		$('[name="username"]').change(function(){
			var input_uid = $('[name="username"]').val();
			var id_check = input_uid.match(/[\s　]/u);
			if(id_check != null){
				$('.err_msg').html('アカウントが空白か、アカウントに空白文字が入っています。<br>リセットしますので、再入力してください。');
				$('[name="username"]').val('');
				$('[name="username"]').focus();
			}else{$('.err_msg').html('')}
		});
		$('[name="password"]').change(function(){
			var input_pass = $('[name="password"]').val();
			var pass_check = input_pass.match(/[\s　]/u);
			if(pass_check != null){
				$('.err_msg').html('パスワードが空白か、パスワードに空白文字が入っています。<br>リセットしますので、再入力してください。');
				$('[name="password"]').val('');
				$('[name="password"]').focus();
			}else{$('.err_msg').html('')}
		});
		/******** サブミット処理  *****************/	
		$('.login').click(function(){
			var input_uid = $('[name="username"]').val();
			var input_pass = $('[name="password"]').val();
			if(input_uid != '' && input_pass != ''){
				$('[name="password"]').attr('autocomplete','new-password');
				$('.form01').submit();
			}
		});
	});
</script>

■3から12行目：マウスダウンの処理

新規登録の時に発生するエラー処理を行っています。

例えばIDが確定していないのにパスワードを入力するような行為はエラーにしています。

■13から31行目：マウスが入力エリアから出た時の処理

IDやパスワードの中に空白文字が入っていた場合はエラーを表示しています。

■32から40行目：サブミット処理

登録する場合は'current-password'を'new-password'に切り替えてからプログラムでサブミットしています。

PHP部分

<?php
	$input_submit_msg = "";
	$name	= isset($_POST['username']) ? $_POST['username']:'';
	$pass	= isset($_POST['password']) ? $_POST['password']:'';
	if($name != '' && $pass != ''){
		$input_submit_msg = '【'.$name.'】と【'.$pass.'】で登録されました。';
	}
?>

■上記は、送信ボタンが挿入された時だけ処理され入力されたデータを表示します。